CSS“透视”背景 - 疯狂的导航菜单问题
Posted
技术标签:
【中文标题】CSS“透视”背景 - 疯狂的导航菜单问题【英文标题】：CSS "see-through" background - crazy navigation menu problem 【发布时间】：2010-09-27 21:45:30 【问题描述】：我有一个疯狂的导航菜单，我必须编写代码。这有点艰难。请在此处查看设计的屏幕截图：
navigation menu screenshot
如您所见，“主页”菜单项的背景相当硬朗！我不知道如何让它的背景“透视”，这意味着它会穿透深色背景并显示带图案的绿色背景。
你知道如何使用 css 做到这一点吗？
提前致谢。
【问题讨论】：
【参考方案1】：你可以使用：
background: transparent;
background: inherit;
但是，您需要构建 html 以便 Home、Journal 等。链接嵌入在带有背景的框中。
对于圆角，check this out。
或者您可以使用具有形状透明度的图像作为背景。
@Gary [评论]：inherit 抓取它在层次结构中找到的第一个设置。因此，如果您有一个中间层，它会取而代之的是它的设置。
你可能会尝试使用：
background-image: url('greencheckers'); /* outer */
background-color: black; /* middle */
background-image: inherit; /* link */
理论上，它应该寻找第一个background-image 设置，然后。但是，我从来没有用过这个，所以不能保证。
【讨论】：
或背景：透明； ? 感谢您的解决方案。我将尝试“背景：继承”以查看它是否有效（按照您的建议进行一些重组）。我之前尝试了很多方法，但令人头疼的是如何将菜单项的背景与图案背景无缝融合。也感谢圆角提示！ @strager：当然背景：透明是我首先想到的。但我希望事情就这么简单。问题是，导航菜单被包裹在具有背景颜色的图层中。所以在这里使用透明不会显示它下面的绿色图案背景。 让我们知道继承的事情是否有效。很想看看结果。【参考方案2】：您可以采用的一种方法是您通常采用的相反方法。将黑色背景应用于其他元素，在突出显示的选项卡所在的位置留出空隙。一种反向推拉门。
创建两张非常长的黑色图像：一张用于右侧，左侧有一个圆角，另一张用于左侧，右侧有一个角，并将它们放置在当前元素的任一侧。遗憾的是，我认为纯 CSS 无法做到这一点，但看起来您已经在使用 JS。
我不确定这是否可行，这只是我的想法，但它可能是一个有趣的方法。
【讨论】：
【参考方案3】：另一个有趣的透明（或半透明）效果的方法是给两个部分
1) 相同的背景图片，或 2) 相似的背景图片，其中一张用颜色或模糊或其他方式修改
...和确保他们的background-position 相同。
这在Eric Meyer's "Complex Spiral" demo 中得到了展示。 （这是他制作的another version。）
澄清：这是在 Meyer 的“Edge”部分中的一个原因 - 它与 IE6 不兼容。 （谢谢，鲍里斯。）
【讨论】：
虽然很酷，但效果在 IE lt 7 中不起作用。如果你没问题，那没问题:) Gary 不需要对背景图片应用效果。也许他可以在 IE6 中使用相同的背景和不同（适当的）背景位置？正文将使用 0,0； Home 会使用 100、120，journal 100、200 等等。【参考方案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>
【讨论】：
喜欢你的“快速”示例甚至处理字体设置等：P 在 Opera 中工作，但 IE 搞砸了（惊喜！）。【参考方案5】：我建议制作一个 30 x 1（高 x 宽）的图像，将其填充为黑色并将不透明度设置为 35% 左右...另存为 .png（与 将该图像添加到您的菜单背景 CSS 类中，如下所示： 我知道这很有效，因为这是我为我的网站所做的。该网站不完整，但您可以查看屏幕截图： http://www.logansarchive.za.net/preview.jpg HTH#MainMenu
display: block;
height: 30px;
background; transparent url("menuBG.png") repeat-x;
【讨论】：
以上是关于CSS“透视”背景 - 疯狂的导航菜单问题的主要内容，如果未能解决你的问题，请参考以下文章