4

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

导航菜单

导航菜单截图

如您所见，“主页”菜单项的背景相当硬朗！我不知道如何让它的背景“透视”，这意味着它穿过黑暗的背景并显示有图案的绿色背景。

你知道如何使用 css 做到这一点吗？

提前致谢。

4

5 回答 5

2

您可以使用：

background: transparent;
background: inherit;

但是，您需要构建您的 HTML，以便Home、Journal等链接嵌入到带有背景的框中。

对于圆角，看看这个。

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

@Gary [评论]：inherit获取它在层次结构中发现的第一个设置。所以如果你有一个中间层，它会取而代之的是它的设置。

您可能会尝试使用：

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

background-color: black;                /* middle */

background-image: inherit;              /* link */

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

于 2008-12-21T08:08:59.100 回答
1

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

创建两张非常长的黑色图像：一张用于右侧，左侧有一个圆角，另一张用于左侧，右侧有一个角，并将它们放置在当前元素的任一侧。可悲的是，我认为纯 CSS 无法做到这一点，但看起来您已经在使用 JS。

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

于 2008-12-22T18:15:08.517 回答
0

不幸的是，您可以通过使用背景位置进行仔细的“手动”定位来模拟 IE6 不支持的固定背景位置（请参阅 nerdposeur 的回答）。用 0,0 偏移量定位大图像。对选定的选项卡使用相同的图像，但将其向左和向上偏移正好是选项卡左上角的位置。这将确保您想要的两个背景完全匹配。

您似乎有一个固定的菜单，因此这意味着要为您的四个菜单元素一个一个仔细地编写背景 CSS。当然，如果你的菜单是动态的，这种方法就行不通了。这是我从这个页面开始快速制作的演示：

<!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>
于 2008-12-22T18:08:28.297 回答
0

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

1) 相同的背景图像，或
2) 相似的背景图像，其中一个用颜色或模糊或其他方式修改

...并确保它们background-position是相同的。

这在Eric Meyer 的“复杂螺旋”演示中得到了证明。（这是他制作的另一个版本。）

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

于 2008-12-22T15:59:49.023 回答
0

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

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

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

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

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

高温高压

于 2010-10-01T10:37:47.313 回答