Question

我有一个疯狂的导航菜单，我必须编码。这有点难过。请在此处查看设计的屏幕截图：

正如您所看到的，“Home”菜单项的背景非常难！我无法弄清楚如何使其背景“透视”，这意味着它切入深色背景并显示图案化的绿色背景。

你知道怎么用css做这个吗？

提前致谢。

Answer 1

您可以使用：

background: transparent;
background: inherit;

但是，您需要构建HTML以便主页，期刊等。链接嵌入在带有背景的框中。

对于圆角，check this out。

或者您可以使用形状透明的图像作为背景。

@Gary [comment]：inherit抓取它在层次结构中找到的第一个设置。所以，如果你有一个中间层，那么它将会改变它的设置。

您可能尝试使用的是：

background-image: url('greencheckers'); /* outer */

background-color: black;                /* middle */

background-image: inherit;              /* link */

理论上，它应该寻找第一个background-image设置。但是，我从来没有使用过这个，所以没有保证。

Answer 2

你能做到的一种方法是你通常采取的相反方法。将黑色背景应用于其他元素，在突出显示的选项卡上留下间隙。一种反向推拉门。

创建两个非常长的黑色图像：一个用于右侧，左侧有一个圆角，另一个用于左侧，右侧有一个角，并将它们放在当前元素的两侧。遗憾的是，我不认为普通的CSS能够做到这一点，但看起来你已经在使用JS了。

我不确定这是多么可行，它只是我的头脑，但它可能是一个有趣的方法。

Answer 3

透明（或半透明）效果的另一个有趣方法是给出两个部分

1）相同的背景图像，或
2）类似的背景图像，其中一个用颜色或模糊或任何

修改

...和确保他们的background-position相同。

这在Eric Meyer's "Complex Spiral" demo中得到了证明。（这是another version他做的。）

澄清：这是在迈耶的“边缘”部分中有一个原因 - 它与IE6不兼容。（谢谢，鲍里斯。）

Answer 4

您可以模仿IE6不支持的固定背景位置（参见nerdposeur的回答），并使用背景位置进行仔细的“手动”定位。使用0,0偏移定位大图像。对选定的选项卡使用相同的图像，但将其偏移到左侧，并向上偏移选项卡左上角的位置。这将确保您想要的两个背景的完全匹配。

您似乎有一个固定的菜单，因此它意味着为您的四个菜单元素逐个仔细地编写背景CSS。当然，如果您的菜单是动态的，这种方法不起作用。这是我从this page开始快速熟练的演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>CSS Tabbed Navigation</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <style type="text/css">
    body {
        margin: 20px;
        padding: 0px;
        background: #CACCB4;
        font: 16px arial, sans-serif; 
        background-image: url('http://www.graphicsarcade.com/backgrounds/strips/background_3.gif'); 
        }

    pre {text-indent: 30px}

    #tabmenu {
        color: #000;
        border-bottom: 2px solid black;
        margin: 12px 0px 0px 0px;
        padding: 0px;
        z-index: 1;
        padding-left: 10px }

    #tabmenu li {
        display: inline;
        overflow: hidden;
        list-style-type: none; }

    #tabmenu a, a.active {
        color: #DEDECF;
        background: #898B5E;
        font: bold 1em "Trebuchet MS", Arial, sans-serif;
        border: 2px solid black;
        padding: 2px 5px 0px 5px;
        margin: 0px;
        text-decoration: none; }

    #tabmenu a.active {
        background-image: url('http://www.graphicsarcade.com/backgrounds/strips/background_3.gif'); 
        background-position: -125px -18px;
        border-bottom: 3px solid #ABAD85; }

    #content {font: 0.9em/1.3em "bitstream vera sans", verdana, sans-serif;
        text-align: justify;
        background: #ABAD85;
        padding: 20px;
        border: 2px solid black;
        border-top: none;
        z-index: 2; }

    #content a {
        text-decoration: none;
        color: #E8E9BE; }

    #content a:hover { background: #898B5E; }
    </style>
</head>

<body>

<ul id="tabmenu">
    <li><a href="tab1.html">Enormous</a></li>
    <li><a class="active" href="tab2.html">Flared</a></li>
    <li><a href="tab3.html">Nostrils</a></li>
</ul>

<div id="content">
  <p>If one examines subpatriarchialist material theory, one is faced with a choice: either accept the presemioticist paradigm of reality or conclude that the task of the artist is deconstruction, given that reality is equal to art. It could be said that the subject is contextualised into a Batailleist 'powerful communication' that includes language as a totality. Marx uses the term 'precapitalist semiotic theory' to denote the bridge between narrativity and society.</p>
  <p>Any number of desituationisms concerning Sartreist absurdity may be discovered. In a sense, the textual paradigm of consensus states that reality has significance. Baudrillard uses the term 'surrealism' to denote the absurdity, and subsequent rubicon, of substructuralist class. It could be said that la Tournier[4] holds that the works of Pynchon are modernistic. The premise of the textual paradigm of consensus states that the significance of the observer is social comment. However, in Gravity's Rainbow, Pynchon examines textual materialism; in The Crying of Lot 49 he denies subcultural discourse.</p>
    <br />
</div>

</body>
</html>

Answer 5

我建议制作一个30 x 1（高x宽）图像，将其填充为黑色并将其上的不透明度设置为约35％...另存为.png（与＆lt; IE7浏览器不兼容）

将该图像添加到菜单背景CSS类中，如下所示：

#MainMenu {
    display: block;
    height: 30px;
    background; transparent url("menuBG.png") repeat-x;
}

我知道这是有效的，因为这是我为我的网站所做的。该网站不完整，但您可以查看截图：

http://www.logansarchive.za.net/preview.jpg

HTH

CSS“透明”背景 - 疯狂的导航菜单问题

5 个答案: