仅使用CSS,是否可以使元素的背景半透明,但元素的内容(文本和图像)不透明?
我想在不将文本和背景作为两个独立元素的情况下完成这一点。
尝试时:
p型{位置:绝对;背景色:绿色;过滤器:alpha(不透明度=60);不透明度:0.6;}跨度{颜色:白色;过滤器:alpha(不透明度=100);不透明度:1;}<p><span>你好,世界</span></p>
看起来子元素受到其父元素的不透明度的影响,因此不透明度:1相对于父元素的不可见性:0.6。
仅使用CSS,是否可以使元素的背景半透明,但元素的内容(文本和图像)不透明?
我想在不将文本和背景作为两个独立元素的情况下完成这一点。
尝试时:
p型{位置:绝对;背景色:绿色;过滤器:alpha(不透明度=60);不透明度:0.6;}跨度{颜色:白色;过滤器:alpha(不透明度=100);不透明度:1;}<p><span>你好,世界</span></p>
看起来子元素受到其父元素的不透明度的影响,因此不透明度:1相对于父元素的不可见性:0.6。
当前回答
不透明度的背景,但不是文本有一些想法。要么使用半透明图像,要么覆盖其他元素。
其他回答
这里有一个jQuery插件Transify(Transify-一个jQueryplugin,可以轻松地将透明度/不透明度应用于元素的背景),它可以为您处理所有事情。
我时不时地遇到这个问题,所以我决定写一些能让生活更轻松的东西。该脚本小于2KB,只需要一行代码就可以运行,如果您愿意,它还可以处理背景的不透明度动画。
不久前,我在Cross Browser Background Transparency With CSS中写到了这一点。
奇怪的是,InternetExplorer6将允许您使背景透明,并使顶部的文本完全不透明。对于其他浏览器,我建议使用透明的PNG文件。
如果你使用的是Less,你可以使用褪色(颜色,30%)。
几乎所有这些答案都假设设计师想要纯色背景。如果设计师实际上想要一张照片作为背景,那么目前唯一真正的解决方案就是JavaScript,就像其他地方提到的jQueryTransify插件一样。
我们需要做的是加入CSS工作组讨论,让他们给我们一个背景不透明度属性!它应该与多背景功能一起工作。
最简单的方法是使用半透明背景PNG图像。
如果需要,可以使用JavaScript使其在InternetExplorer6中工作。
我使用Internet Explorer 6中透明PNG中概述的方法。
除此之外,您可以使用两个并排的兄弟元素来伪装它-使一个半透明,然后将另一个绝对放置在顶部。