Question

我的问题是：如果我在CSS中的div上设置了背景图像，我是否可以仅使用CSS设置该图像的不透明度，同时不影响div本身的不透明度？我使用多个背景所以这样做HTML会很复杂，所以我只想要一个CSS解决方案（如果可能的话）。

Answer 1

你可以用CSS做这样的事情：

div {
    position: relative;
    width: 400px;
    height: 300px;
}

div:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/6/6e/The_sun1.jpg);
    width: 100%;
    height: 100%;
    opacity: 0.4;
    z-index: -1;
}

http://jsfiddle.net/2wnRy/

Answer 2

opacity : 0.2;
filter: alpha(opacity=20); /*ie*/

示例：http://jsfiddle.net/YrGRz/3/

Answer 3

您可以使用伪元素来模拟它。

div {
    position: relative;
    width: 10rem;
    height: 10rem;
}

div::after {
    content: "";
    opacity: .3;
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url("background-image.png");
}

http://jsfiddle.net/lrsbck/aEhgs/

更改背景图像不透明度，同时不影响包含div的不透明度

3 个答案: