尝试使用 css 为背景图像添加不透明度

Question

谁能想到为什么我的css没有在这个背景图像上添加透明颜色(不透明度(叠加层：

.header-image {
display: block;
width: 100%;
text-align: center;
/* image must be 1900 x 500 */
background: url('back.1.jpg') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
opacity: 1.0;
}

感谢所有的帮助。

Answer 1

在我的理解中，您不是在谈论Q中的不透明度{在此背景图像上添加透明颜色(不透明度(叠加层 }

据我所知，有三种方法——

1#

background-color: rgba(255, 255, 255, 0.59);
background-image: url('back.1.jpg');

2#这是简写，并在一行中指定所有内容：

background: rgba(255, 255, 255, 0.59) url('back.1.jpg');

在上面的代码中，0.59定义了叠加颜色的不透明度。

3#这更像是一种解决方法 -

.header-image {
background: url('back.1.jpg') no-repeat center center scroll;
position:relative;
}
.header-image:after {
content: '';
position: absolute;
background: rgba(255, 255, 255, 0.53);
left: 0;
right: 0;
top: 0;
bottom: 0;
}

在上面的代码中，header-image:afterbackground定义了覆盖颜色的不透明度。

其余代码还可以

Answer 2

简单的答案是您的不透明度设置为 1，这意味着它是全彩色的。如果要使其更加透明，则需要具有小于 1 的值。

.header-image {
display: block;
height: 500px;
width: 100%;
text-align: center;
/* image must be 1900 x 500 */
background: url('http://retrotherm.com/wp-content/uploads/2016/03/Intro-Slider-Background-1-500-x-1900.jpg') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
opacity: .1;
}

<div class="header-image"></div>

Answer 3

只需将不透明度值1更改为小于 1，即 0.3、0.4 等。

.header-image {
opacity : 0.3;
}