仅使用CSS,是否可以使元素的背景半透明,但元素的内容(文本和图像)不透明?

我想在不将文本和背景作为两个独立元素的情况下完成这一点。

尝试时:

p型{位置:绝对;背景色:绿色;过滤器:alpha(不透明度=60);不透明度:0.6;}跨度{颜色:白色;过滤器:alpha(不透明度=100);不透明度:1;}<p><span>你好,世界</span></p>

看起来子元素受到其父元素的不透明度的影响,因此不透明度:1相对于父元素的不可见性:0.6。


当前回答

您可以通过(ab)使用渐变语法为Internet Explorer 8解决此问题。颜色格式为ARGB。如果使用Sass预处理器,可以使用内置函数“ie-hex-str()”转换颜色。

background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";

其他回答

有一个技巧可以最小化标记:使用伪元素作为背景,可以在不影响主元素及其子元素的情况下设置其不透明度:

DEMO

输出:

相关代码:

p型{位置:相对;}p: 之后{内容:“”;位置:绝对;顶部:0;左:0;宽度:100%;高度:100%;背景:#fff;-ms filter:“progid:DXImageTransform.Microsoft.Alpha(不透明度=50)”;不透明度:.6;z指数:-1;}/***以下仅适用于演示样式***/正文{背景:url('http://i.imgur.com/k8BtMvj.jpg')不重复;背景尺寸:封面;}p型{宽度:50%;填充:1em;保证金:10%自动;字体系列:arial,serif;颜色:#000;}国际货币基金组织{显示:块;最大宽度:90%;边距:.6em自动;}<p>Lorem ipsum dolor坐amet,consectetur adipiscing elit。不要用舌头骚扰。<img src=“http://i.imgur.com/hPLqUtN.jpg“alt=”“/></p>

浏览器支持Internet Explorer 8和更高版本。

伪元素不透明度

背景色:rgba(255,0,0,0.5);如上所述,简单地说就是最好的答案。即使在2013年,使用CSS3也不简单,因为不同浏览器的支持水平会随着每次迭代而变化。

虽然所有主要浏览器都支持背景色(CSS 3并不陌生)[1],但alpha透明度可能很棘手,尤其是在版本9之前的Internet Explorer以及版本5.1之前的Safari浏览器上的边框颜色。[2]

使用Compass或SASS这样的工具确实有助于生产和跨平台兼容性。


[1] W3Schools:CSS背景色属性

[2] Norman的博客:浏览器支持清单CSS3(2012年10月)

几乎所有这些答案都假设设计师想要纯色背景。如果设计师实际上想要一张照片作为背景,那么目前唯一真正的解决方案就是JavaScript,就像其他地方提到的jQueryTransify插件一样。

我们需要做的是加入CSS工作组讨论,让他们给我们一个背景不透明度属性!它应该与多背景功能一起工作。

最简单的方法是使用半透明背景PNG图像。

如果需要,可以使用JavaScript使其在InternetExplorer6中工作。

我使用Internet Explorer 6中透明PNG中概述的方法。

除此之外,您可以使用两个并排的兄弟元素来伪装它-使一个半透明,然后将另一个绝对放置在顶部。

我通常在工作中使用这门课。很好。

.透明{过滤器:alpha(不透明度=50);/*Internet Explorer*/-khtml不透明度:0.5;/*KHTML和旧Safari*/-moz不透明度:0.5;/*Firefox和Netscape*/不透明度:0.5;/*Firefox、Safari和Opera*/}