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;
}

上面代码background header-image:after中的

定义了叠加颜色的不透明度。

其余代码没问题

Answer 2

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

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

.header-image {
  opacity : 0.3;
}

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

3 个答案: