如何在不影響背景顏色的情況下更改背景圖像不透明度？

我有一個背景顏色和透明背景圖像的div。如何在不影響背景顏色的情況下更改背景圖像不透明度？

HTML

<div class="watermark"> 
    <div class="col-md-12">Something else</div> 
    <div class="col-md-12">Something more..</div> 
    <div class="col-md-12">Something at the end</div> 
</div>

CSS

body{ 
    background-color:white; 
} 

.watermark { 
    display: block; 
    position: relative; 
} 

.watermark::after { 
    content: ""; 
background:#C52F11 url(https://www.google.co.in/images/srpr/logo11w.png)no-repeat; 
    opacity: 0.2; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 
}

jsfiddle

我想改變圖像的透明度，但離開的背景顏色的影響。但是當我設置不透明度時，兩者都會改變。

有沒有辦法做到這一點？

來源

2016-03-15 Urbycoz

使用顏色值rgba並刪除opacity。對於白色覆蓋層，您可以使用background:rgba(255,255,255, 0.5);，而最後一個值（本例中爲0.5）定義您的透明度。您可以查看fiddle。

來源

2016-03-15 09:49:28 Aer0

這是一個很好的觀點，但它不是錯誤的方式嗎？他們想要改變圖像的不透明度，而不是顏色 – Rhumborl

這就是我以前的樣子。感謝Aer0。這是像你這樣的天才，讓我們其餘的人看起來不好:-) – Urbycoz

大聲笑感謝布蘭德斯，但我不會稱我爲天才。至少我很高興我能幫你。 – Aer0

您可以添加::before僞元素來處理背景顏色，以便::after元素具有圖像和不透明度更改，並且background-color可以不受影響。請注意，實際.watermark元素的background-color需要是透明的，因爲z-index:-1會將僞元素推到實際元素的後面。

.watermark { 
 
    width: 300px; 
 
    height: 100px; 
 
    display: block; 
 
    position: relative; 
 
} 
 

 
.watermark::before, .watermark::after { 
 
    content: ""; 
 
    top: 0; 
 
    left: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    position: absolute; 
 
    z-index: -1; 
 
} 
 

 
.watermark::before { 
 
    background:#C52F11; 
 
} 
 

 
.watermark::after { 
 
background: url(https://www.google.com/images/srpr/logo11w.png) no-repeat; 
 
    opacity: 0.2; 
 
}

<div class="watermark"> 
 
    <div class="col-md-12">Something else</div> 
 
    <div class="col-md-12">Something more..</div> 
 
    <div class="col-md-12">Something at the end</div> 
 
</div>

Updated fiddle

來源

2016-03-15 09:55:00 Rhumborl

CSS身體，不管你想要

body{ 
    background-color:white; 
}

主要格（.watermark）與背景顏色，寬度和高度您選擇的

.watermark { 
    width: 538px; 
    height: 190px; 
    display: block; 
    position: relative; 
    background: #C52F11; 
}

水印CSS後，用不透明

.watermark::after { 
    content: ""; 
    background: url('https://www.google.co.in/images/srpr/logo11w.png') no-repeat; 
    opacity: 0.4; 
    top: 0; 
    left: 0; 
    position: absolute; 
    z-index: 1; 
    width: 538px; 
    height: 190px; 
}

圖像我會建議使用兩個div。它總是一個好主意，有相對和絕對的兩個divs重疊的東西。而且，它會在您必須更改它之前爲您的代碼結構添加長壽命。

來源

2016-03-15 10:12:43

如何在不影響背景顏色的情況下更改背景圖像不透明度？

回答

相關問題