如何將顏色疊加層添加到背景圖像？

我在SO和Web上都看到過這個問題。但是他們中沒有一個是我正在尋找的。如何將顏色疊加層添加到背景圖像？

如何使用CSS將顏色疊加層添加到背景圖像？

示例HTML：

<div class="testclass"> 
</div>

範例CSS：

.testclass { 
background-image: url("../img/img.jpg"); 
}

請注意：

我想只用CSS來解決這個問題。即我不想在div「testclass」中爲顏色疊加添加子div。
這不應該是一個「懸停效應」我只想簡單地爲背景圖像添加一個顏色超高亮度。
我希望能夠使用不透明度，即我正在尋找允許RGBA顏色的解決方案。
這不是一個gardient我只想找一種顏色，可以說是黑色。

這可能嗎？（如果沒有，我會驚訝的，但我一直沒有找到任何有關這方面的信息），如果是的話，實現這個目標的最好方法是什麼？所有的建議和建議appriciated！

來源

2016-04-17 Alex

背景圖像頂部的顏色疊加或背後？ –

對此有數千個問題...我真的很驚訝，你沒有找到明顯的重複問題。 –

這個問題是重複的。 – Fiido93

我看到2種輕鬆選擇：

多背景與translucide單梯度o版本圖像
hudge插圖陰影

梯度選項：

html { 
 
    min-height:100%; 
 
    background:linear-gradient(0deg,rgba(255,0,150,0.3),rgba(255,0,150,0.3)),url(http://lorempixel.com/800/600/nature/2); 
 
    background-size:cover; 
 
    }

陰影選項：

html { 
 
    min-height:100%; 
 
    background:url(http://lorempixel.com/800/600/nature/2); 
 
    background-size:cover; 
 
    box-shadow:inset 0 0 0 2000px rgba(255,0,150,0.3); 
 
    }

我的一個老codepen有幾個例子

來源

2016-04-17 17:38:20

謝謝！由於我認爲你的答案是最符合我需求的答案，並且使代碼更清潔，所以其他解決方案:) – Alex

background-image具有多個值。

所以只需要1種顏色的線性漸變和css blend modes就可以做到這一點。

.testclass { 
    background-image: url("../images/image.jpg"), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)); 
    background-blend-mode: overlay; 
}

請注意，IE/Edge for CSS混合模式根本不支持。

來源

2016-04-17 17:16:46 Uzi

更好的提及瀏覽器支持表 - http://caniuse.com/#feat=css-backgroundblendmode – Stickers

你是特別正確的，考慮到IE/Edge完全支持和Safari下跌位落後。感謝您指出！ – Uzi

您可以使用僞元素來創建疊加層。

.testclass { 
    background-image: url("../img/img.jpg"); 
    position: relative; 
} 
.testclass:before { 
    content: ""; 
    position: absolute; 
    left: 0; right: 0; 
    top: 0; bottom: 0; 
    background: rgba(0,0,0,.5); 
}

來源

2016-04-17 17:17:16 Stickers

-3

您可以添加着色

的Html （<div class=tint>img src chose picture of what color overlay you want</div>）

的CSS （.tint img{"tranparrent:50%;"}）****

來源

2016-04-17 17:28:51

你甚至讀過這個問題嗎？ –

試試這個，它的簡單和清晰。我已經從這裏找到它：https://css-tricks.com/tinted-images-multiple-backgrounds/

.tinted-image { 

    width: 300px; 
    height: 200px; 

    background: 
    /* top, transparent red */ 
    linear-gradient(
     rgba(255, 0, 0, 0.45), 
     rgba(255, 0, 0, 0.45) 
    ), 
    /* bottom, image */ 
    url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/owl1.jpg); 
}

來源

2017-11-02 10:55:29 Udara

如何將顏色疊加層添加到背景圖像？

回答

相關問題