試圖不透明的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

回答

相關問題