试图不透明的CSS

添加到背景图像谁能想到，为什么我的CSS没有这种背景图像上添加透明色（不透明度）覆盖：为所有帮助试图不透明的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; 
}

感谢。

来源

2017-08-26 henry

在我的理解，你是不是在你的谈论不透明 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:after background

限定覆盖颜色的不透明度。

其余的代码是好的

来源

2017-08-26 05:07:11 weBBer

-1

简单的答案是你的不透明度设置为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>

来源

2017-08-26 03:01:13 RBCunhaDesign

-1

只要改变透明度值小于1即0.3，0.4等。

.header-image { 
    opacity : 0.3; 
}

来源

2017-08-26 03:31:12

试图不透明的CSS

回答

相关问题