仅使用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。
当前回答
我通常在工作中使用这门课。很好。
.透明{过滤器:alpha(不透明度=50);/*Internet Explorer*/-khtml不透明度:0.5;/*KHTML和旧Safari*/-moz不透明度:0.5;/*Firefox和Netscape*/不透明度:0.5;/*Firefox、Safari和Opera*/}
其他回答
当使用#AARGGBB格式时,它对我有效,因此对我有效的格式是#1C00ff00。试试看,因为我看到它对某些人有效,而对其他人无效。我在CSS中使用它。
问题是,在您的示例中,文本实际上是完全不透明的。它在p标记内具有完全不透明性,但p标记只是半透明的。
您可以添加半透明的PNG背景图像,而不是在CSS中实现,或者将文本和div分离为两个元素,并将文本移动到框上(例如,负边距)。
否则就不可能了。
正如Chris所提到的:如果你使用一个具有透明度的PNG文件,你必须使用JavaScript解决方法来让它在烦人的Internet Explorer中工作。。。
不透明度的背景,但不是文本有一些想法。要么使用半透明图像,要么覆盖其他元素。
我是这样做的(这可能不是最佳的,但它有效):
创建要半透明的div。给它一个类/id。将其留空,然后将其关闭。为其设置高度和宽度(例如,300像素乘300像素)。给它一个0.5的不透明度或任何你喜欢的颜色,以及一个背景色。
然后,在该div的正下方,创建另一个具有不同类/id的div。在其中创建一个段落,在其中放置文本。给出div位置:relative,top:-295px(即负295像素)。给它一个z索引为2,以便于度量,并确保它的不透明度为1。根据您的喜好设置段落的样式,但要确保尺寸小于第一个div的尺寸,这样它就不会溢出。
就是这样。代码如下:
.反式{不透明度:0.5;高度:300px;宽度:300px;背景色:橙色;}.变速器2{不透明度:1;位置:相对;顶部:-295px;}.变速器2 p{宽度:295px;颜色:黑色;字号:粗体;}<body><div class=“trans”></div><div class=“trans2”><p>文本文本文本</p></div></body>
这在Safari2.x中有效,但我不了解Internet Explorer。
有一个更简单的解决方案是在同一个分区上的图像上放置一个覆盖层。这不是该工具的正确用法。但是,使用CSS制作覆盖层就像一种魅力。
使用如下插入阴影:
box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.9);
仅此而已:)