CSS3的背景图像透明度？

Question

有没有办法使用CSS3为背景图像添加透明度？

Answer 1

如果您使用图像标记来设置图像,则可以使用CSS3属性"opacity"轻松更改它.

它是这样写的:

img {
    opacity: 0.4;
    filter: alpha(opacity = 40); /* For IE */
}

不透明度的值必须介于0和1之间.0是不可见的,1是不透明的.

如果您使用CSS"background-image"属性应用背景图像,那么您仍然可以使用不透明度来更改背景图像,但必须以不同的方式完成.

这是因为当您只想在背景图像上更改不透明度时,不透明度值会更改整个元素的不透明度.

有一种简单的方法可以解决这个问题:只需在图像上叠加内容并将它们包装在一个共同的父级中,然后将不透明度更改应用于背景部分:

HTML

<div id="container">
    <div id="background" class="translucent"></div>
    <div id="content"></div>
</div>

CSS

.translucent {
    opacity: 0.4;
    filter: alpha(opacity = 40); /* For IE */
}
#container {
    position: relative;
    width: 200px;
    height: 200px;
}
#background, #content {
    position: absolute;
    top: 0;
    left: 0;
}
#background {
    background-image: url(http://www.thisisfake.com);
}

Answer 2

您还可以使用css3伪类和不透明度来完成透明背景图像.例如....

HTML:

<div class="transparent-background">
        ...content that should have 100% opacity...
</div>

CSS:

.transparent-background { ... }
.transparent-background:after {
    background: url("../images/yourimage.jpg") repeat scroll 0 0 transparent;
    opacity: 0.5;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}

看样本 - http://jsfiddle.net/sjLww/

Answer 3

图像添加到HTML标签，并添加background-color使用rgba(0,0,0,[your opacity])

html {
    background:url('image.jpg') #303030; 
    background-size:cover;
}

body {
    background:rgba(0,0,0,0.7);
}