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

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

尝试时:

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

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


当前回答

不透明度的背景,但不是文本有一些想法。要么使用半透明图像,要么覆盖其他元素。

其他回答

由于很多人会来到这里,想知道如何调整任何元素(而不仅仅是背景)的不透明度,所以只需在该元素的CSS中添加不透明度:0.2(或您希望的0到1之间的任何数字)即可。

实例

.myclass {
  color: #eb4746;
  opacity: 0.2;
}

这可以用于背景、标题、段落等。

问题是,在您的示例中,文本实际上是完全不透明的。它在p标记内具有完全不透明性,但p标记只是半透明的。

您可以添加半透明的PNG背景图像,而不是在CSS中实现,或者将文本和div分离为两个元素,并将文本移动到框上(例如,负边距)。

否则就不可能了。

正如Chris所提到的:如果你使用一个具有透明度的PNG文件,你必须使用JavaScript解决方法来让它在烦人的Internet Explorer中工作。。。

您可以通过(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')";

不久前,我在Cross Browser Background Transparency With CSS中写到了这一点。

奇怪的是,InternetExplorer6将允许您使背景透明,并使顶部的文本完全不透明。对于其他浏览器,我建议使用透明的PNG文件。

不透明度的背景,但不是文本有一些想法。要么使用半透明图像,要么覆盖其他元素。