将列表设计为带有背景溢出内容的选项卡

Question

我想不出任何更好的方法来命名此问题，但我会解释。

我有一个mediawiki网站，背景图案（如羊皮纸）背后的文章。在每篇文章的顶部，我想拥有像维基百科这样的标签（使用page | talk | edit等链接）。

问题是，标签应该无缝地符合文章的背景，我无法弄清楚这是否真的有可能。

我试图这样做的方式是在实际内容div中定位列表，并给出< li>项目的透明背景，但据我所见，无法为其余的< ul >的背景黑色，而不影响< li>在那里。

人有一个想法？

Answer 1

你可以有<ul>之外的内容<div>和使用的background-positionCSS property定位上的内容<div>的背景和其移到<ul>的高度。像下面这样（注意，这是未经测试，只是想给你一个总体思路）：

<style> 
    #links { 
    background-image: url('/images/myawesomebackground.png'); 
    height: 20px; 
    } 

    #content { 
    background-image: url('/images/myawesomebackground.png'); 
    background-position: 0px 20px; 
    } 
</style> 

<ul id='links'> 
    <li>Link 1</li> 
    <li>Link 2</li> 
</ul> 

<div id='content'> 
Stuff goes here... 
</div> 

Answer 2

这确实不可能。相反，我会给li元素在左侧和右侧留下厚厚的黑色边框。