使用CSS變暗圖像（任何形狀）

所以我看到了很多方法來使用CSS變暗圖像，包括帶圓角的圖像，但是我的問題是不同的。使用CSS變暗圖像（任何形狀）

假設我有一個.png圖像，看起來像一隻小狗（只是用它，我沒有任何好的例子），當我把它放在我的頁面上時，我給它尺寸爲100 x 100

但是我不能只在它上面覆蓋一些東西，或者染上整個圖像，因爲它會使狗的背景也被染上，看起來很醜。

是否可以使用CSS爲任意形狀的圖像着色？

（我假設你明白我的意思了，沒用的代碼是沒有必要的）

謝謝！

來源

2013-04-02 Josiah

給相對位置，圖像和絕對位置裏面添加 – Morpheus

一個div你需要做一個PNG相同尺寸與的一個剪影狗和覆蓋它。 – gaynorvader

@Morpheus，但這會有幫助嗎？如果位置是100px x 100px，並且圖像是狗的形狀，並且圖像的其餘部分是透明的，那麼它如何添加一個尺寸爲100px x 100px的div來幫助。或許我想念你。我承認我不經常使用網絡語言。 – Josiah

鑑於任何替代品的難度，您可以隨時更改圖像的不透明度，這可能是最好的方法。

CSS：

.tinted { opacity: 0.8; }

如果你有興趣更好的瀏覽器兼容性，建議閱讀本：

http://css-tricks.com/css-transparency-settings-for-all-broswers/

如果你確定的話，你可以得到這個遠工作回到IE7（誰知道！）

注意：正如JGonzalezD在下面指出，這onl如果背景顏色通常比圖像本身更暗，y實際上會使圖像變暗。雖然這種技術可能仍然有用，如果您不特意想要變暗圖像，而是想出於任何原因在懸停/聚焦/其他狀態下突出顯示它。

來源

2013-04-02 13:54:04 Sean

同時用'背景：黑色'來包裝圖像; –

這不會使圖像變暗（不透明度：1;）它實際上變輕了。 – juliangonzalez

如果圖像在黑暗的背景下顯示，它似乎會使圖像變暗（隨着越來越多的黑色背景顯示）。你可以在這裏看到一個例子：https://jsfiddle.net/mvhfxrm1/頂部圖像的顏色爲#CCCCCC，而底部圖像的顏色爲＃676767 – Sean

Webkit only solution

快速的解決方案，依靠-webkit-mask-image財產。 -webkit-mask-image爲元素設置遮罩圖像。

有這種方法的幾個陷阱：

顯然，只能在WebKit瀏覽器
需要額外的包裝應用:after僞元素（IMG標籤不能有:before/:after僞元素，grr）
由於還有一個包裝器，我不確定如何使用attr(…) CSS函數獲取IMG標記URL，因此它被單獨硬編碼到CSS中。

如果你可以看看這些問題，這可能是一個可能的解決方案。 SVG過濾器將變得更加靈活，而且Canvas解決方案將更加靈活並且擁有更廣泛的支持（SVG不支持Android 2.x）。

來源

2013-04-02 14:02:36 thirdender

我會做一個狗的剪影（黑色），其餘的原始圖像相同的新形象。在html中，添加一個帶有此輪廓的包裝div作爲背景。現在，使原始圖像半透明。狗會變黑，狗的背景會保持不變。您可以：通過將懸停時的原始圖像的不透明度設置爲100％來懸停技巧。然後，當你將鼠標放在他身上時，它就會彈出來！

風格

.wrapper{background-image:url(silhouette.png);} 
.original{opacity:0.7:} 
.original:hover{opacity:1} 

<div class="wrapper"> 
    <div class="img"> 
    <img src="original.png"> 
    </div> 
</div>

來源

2014-05-09 15:30:59 JSSR

第二行應該是'.original {opacity：0.7;}' –

易爲

img { 
    filter: brightness(50%); 
}

來源

2016-12-10 14:55:34

當然這應該是被接受的答案。這是所有背景下最簡單的一種。 – MGDavies

這不適用於微軟瀏覽器 – FadedCoder

它似乎適用於Edge，但不適用於IE。 – abalter

使用CSS變暗圖像（任何形狀）

回答

相關問題