使用CSS定义的不透明度设置div中元素的不透明度?

时间:2011-12-22 19:06:57

标签: html css opacity

我正在开展一个项目,其中我使用图像作为菜单的背景。我已经在CSS样式表中定义了类,这些类指示项目是否被“选中”时的外观,这意味着用户不在每个项目链接的页面上。

我在图像顶部使用div构建了应用了样式的div,使其具有半透明的白色背景,因此看起来图像的一部分突出显示。每个半透明div还包含组成链接的文本,颜色设置为白色。我希望div保持不透明度,而文本保持不透明度为“1”。

我尝试过在类似问题(CSS - Apply Opacity to Element but NOT To Text Within The Element)中讨论过的方法,但该方法对我来说似乎不起作用。

如果您想查看它,我已在http://jsfiddle.net/Cwca22/uG5y8/在JSFiddle上发布了该链接的代码。

提前感谢所有帮助。

4 个答案:

答案 0 :(得分:1)

如果我理解正确,您希望div的背景颜色部分透明以显示图像,但保持文字不透明?这很简单:3

<div style="background-color: rgba(255,255,255,0.5);">Text</div>

如果您想为不允许此格式的浏览器提供支持,则需要:

<div style="background: #ffffff; background: rgba(255,255,255,0.5);">Text</div>

答案 1 :(得分:1)

如果您正在寻找一个纯CSS解决方案,并且愿意稍微改变您的标记,请看一下这个例子:

http://jsfiddle.net/jJ4MZ/3/

它将每个“链接”视为单独的背景和文本元素的组合,然后将它们放在彼此之上,以便只有背景div使用透明度。

答案 2 :(得分:0)

没有任何标准解决方案的老问题!对于今天的CSS来说,这是众所周知的。我所知道的唯一解决方案是使用JS。使用JS,您可以捕获受影响的H#的鼠标移动并创建/定位元素。这个新的'over'元素不应该是DIV的子元素,不透明度为0.2。

答案 3 :(得分:0)

有一次我为这样的问题写了一个jsFiddle。这是http://jsfiddle.net/A53Py/5/

创建一个相同级别的元素,该元素绝对位于元素后面而没有不透明度。无需告诉它跨浏览器

希望有所帮助