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

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

尝试时:

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

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


当前回答

为了使元素的背景半透明,但使元素的内容(文本和图像)不透明,您需要为该图像编写CSS代码,并且必须添加一个名为opacity的最小值属性。

例如

.image {
   position: relative;
   background-color: cyan;
   opacity: 0.7;
}

//值越小,透明度越高,或者值越低,透明度越低。

其他回答

这给出了所需的结果-

body {
    background-image: url("\images\dark-cloud.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
    opacity: .8;
}

设置背景的不透明度。

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

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

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

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

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

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

否则就不可能了。

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

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

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和更高版本。

伪元素不透明度

这里有一个jQuery插件Transify(Transify-一个jQueryplugin,可以轻松地将透明度/不透明度应用于元素的背景),它可以为您处理所有事情。

我时不时地遇到这个问题,所以我决定写一些能让生活更轻松的东西。该脚本小于2KB,只需要一行代码就可以运行,如果您愿意,它还可以处理背景的不透明度动画。