当前位置：文江博客话题详情

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

发布于 2024-07-10 19:55:05 字数 403 浏览 4 评论 0原文

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

导航菜单截图

可以看到，“Home”菜单项的背景相当硬朗！我不知道如何使其背景“透明”，这意味着它会穿透深色背景并显示带图案的绿色背景。

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

提前致谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

贱人配狗天长地久 2024-07-17 19:55:05

您可以使用以下任一方法：

background: transparent;
background: inherit;

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

对于圆角，看看这个。

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

@Gary [comment]：inherit 获取它在层次结构中找到的第一个设置。因此，如果你有一个中间层，它就会采用它的设置。

然后您可能会尝试使用：

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

background-color: black;                /* middle */

background-image: inherit;              /* link */

理论上，它应该查找第一个 background-image 设置。但是，我从未使用过这个，所以不能保证。

You can use either:

background: transparent;
background: inherit;

But, you'll need to structure your HTML so that the Home, Journal, etc. links are embedded in the box with the background.

For rounded corners, check this out.

Or you can use images with shaped transparency as the background.

@Gary [comment]: inherit grabs the first settings it finds going up the hierarchy. So if you have a middle layer, it's gonna pick up on its settings instead.

Something you might try then is to use:

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

background-color: black;                /* middle */

background-image: inherit;              /* link */

In theory, it should look for the first background-image setting, then. But, I've never used this, so no guarantees.

回复收藏 0 原文

风和你 2024-07-17 19:55:05

您可以采取的一种方法是与通常采取的方法相反。将黑色背景应用于其他元素，在突出显示的选项卡处留下间隙。有点像反向滑动门。

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

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

回复收藏 0 原文

画中仙 2024-07-17 19:55:05

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

1) 相同的背景图像，或
2) 相似的背景图像，其中一张经过颜色或模糊或其他修改

...并确保它们的背景位置相同。

Eric Meyer 的“Complex Spiral”演示对此进行了演示。（这是他制作的另一个版本。）

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

回复收藏 0 原文

金橙橙 2024-07-17 19:55:05

遗憾的是，您可以通过使用背景位置进行仔细的“手动”定位来模拟固定背景位置，但 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>

You can emulate fixed background position unfortunately not supported by IE6 (see nerdposeur's answer) with careful "manual" positioning using background-position. Position the big image with 0,0 offset. Use the same image for selected tab, but offset it to the left and up by exactly the position of the top left corner of the tab. That will ensure exact matching of the two backgrounds you want.

You seem to have a fixed menu, so it means carefully writing background CSS for your four menu elements, one by one. Of course, if your menu is dynamic, this approach does not work. Here's a demo I quickly cooked up starting with 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>

回复收藏 0 原文

宛菡 2024-07-17 19:55:05

我建议制作一个 30 x 1（高 x 宽）图像，将其填充为黑色并将其不透明度设置为约 35%...另存为 .png（与

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

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

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

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

HTH

I suggest making a 30 x 1 (Height x Width) image, fill it black and set opacity on it to about 35%... Save as .png (not compatible with < IE7 browsers)

Add that image to your menu background CSS class as follows:

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

I know this works because it's what I did for my site. The site isn't complete, but you can check out a screenshot:

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

HTH

回复收藏 0 原文

~没有更多了~

关于作者

烟酒忠诚

暂无简介

0 文章

0 评论

21 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（5）

关于作者

相关话题

热门标签

推荐作者

yangzhenyu123

lvzun

执笔绘流年

芯好空

始于初秋

谁与争疯

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（5）

关于作者

相关话题

热门标签

推荐作者

yangzhenyu123

lvzun

执笔绘流年

芯好空

始于初秋

谁与争疯

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。