CSS中的透明PNG圖像的背景顏色

實際上可以在CSS中的透明PNG圖像上應用背景顏色嗎？這裏有一個例子：CSS中的透明PNG圖像的背景顏色

使用CSS，完全CSS把這個圖像

這個使用CSS代碼一樣background-color: rgba(0,0,300,.5)

全部（當然HTML）？

謝謝。

來源

2017-09-14 Wyvh

不，這是不可能改變顏色那樣。你想讓圖像在懸停或更改時進行更改。 –

@AnmolSandal確實可以使用CSS濾鏡。 – andreas

是的，我已經找到它並得到了一個解決方案。大拇指你的問題，學到了新東西 –

使用background-color時，您無法實現此效果，因爲應用於疊加元素的透明背景顏色總是會影響PNG圖像的透明部分。

您需要CSS filtershue-rotate()（旋轉圖像顏色紫）和brightness()（使圖像變暗）：

img { 
 
    filter: hue-rotate(230deg) brightness(60%); 
 
}

<img src="https://i.stack.imgur.com/nPnsV.png" />

見MDN的more information about CSS filters。對於CSS過濾器也有一個有用的article on CSS Tricks。

來源

2017-09-14 10:24:29 andreas

謝謝。因此，沒有真正的方法可以將低透明度的顏色懸停在圖像上，而不是將圖像的顏色（色調旋轉）完全轉換爲另一種顏色（就像使用'background-color：rgba（0,300,0， .15）'？ – Wyvh

你可以做到這一點，但即使你將這種效果應用於重疊元素，也會始終影響圖像的透明部分... – andreas

哦，那很傷心，我想到了圖像映射，但是你不能在其上應用背景顏色：/將其標記爲最佳答案 – Wyvh

使用CSS濾鏡

從文章由克里斯·Coyier約filters：

CSS過濾器是一個強大的工具，作者可以用它來實現不同的視覺效果（有點像Photoshop濾鏡爲瀏覽器）。在顯示元素之前，CSS filter屬性提供了對效果的訪問，例如模糊或顏色偏移元素的渲染。

模糊（）

亮度（）

對比度（）

下拉陰影（）

灰度（）

色調旋轉（）

反轉（）

opacity（）

saturate（）

烏賊（）

篩選樣品（基於W3S）：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
img { 
 
    width: 33%; 
 
    height: auto; 
 
    float: left; 
 
} 
 

 
.blur {-webkit-filter: blur(4px);filter: blur(4px);} 
 
.brightness {-webkit-filter: brightness(0.30);filter: brightness(0.30);} 
 
.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);} 
 
.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);} 
 
.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);} 
 
.invert {-webkit-filter: invert(100%);filter: invert(100%);} 
 
.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);} 
 
.saturate {-webkit-filter: saturate(7); filter: saturate(7);} 
 
.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);} 
 
.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);} 
 
</style> 
 
</head> 
 
<body> 
 

 
<p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.</p> 
 

 
<img src="https://i.stack.imgur.com/nPnsV.png" width="300" height="300"> 
 
<img class="blur" src="https://i.stack.imgur.com/nPnsV.png" width="300" height="300"> 
 
<img class="brightness" src="https://i.stack.imgur.com/nPnsV.png" width="300" height="300"> 
 
<img class="contrast" src="https://i.stack.imgur.com/nPnsV.png" width="300" height="300"> 
 
<img class="grayscale" src="https://i.stack.imgur.com/nPnsV.png" width="300" height="300"> 
 
<img class="huerotate" src="https://i.stack.imgur.com/nPnsV.png" width="300" height="300"> 
 
<img class="invert" src="https://i.stack.imgur.com/nPnsV.png" width="300" height="300"> 
 
<img class="opacity" src="https://i.stack.imgur.com/nPnsV.png" width="300" height="300"> 
 
<img class="saturate" src="https://i.stack.imgur.com/nPnsV.png" width="300" height="300"> 
 
<img class="sepia" src="https://i.stack.imgur.com/nPnsV.png" width="300" height="300"> 
 
<img class="shadow" src="https://i.stack.imgur.com/nPnsV.png" width="300" height="300"> 
 

 
</body> 
 
</html>

懸停效果：

img:hover { 
 
    filter: hue-rotate(250deg); 
 
}

<img src="https://i.stack.imgur.com/nPnsV.png" />

來源

2017-09-14 10:22:34 Hash

謝謝哈希。 – Wyvh

希望你學到了新的東西:) – Hash

-1

不能從CSS，你想改變圖像的顏色。但是你可以使用過濾器進行一些擴展。

.saturate {-webkit-filter: saturate(3); filter: saturate(3);} 
.grayscale {-webkit-filter: grayscale(100%); filter: grayscale(100%);} 
.contrast {-webkit-filter: contrast(160%); filter: contrast(160%);} 
.brightness {-webkit-filter: brightness(0.25); filter: brightness(0.25);} 
.blur {-webkit-filter: blur(3px); filter: blur(3px);} 
.invert {-webkit-filter: invert(100%); filter: invert(100%);} 
.sepia {-webkit-filter: sepia(100%); filter: sepia(100%);} 
.huerotate {-webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg);} 
.rss.opacity {-webkit-filter: opacity(50%); filter: opacity(50%);}

DEMO

請檢查這個計算器的答案。 Change color of PNG image via CSS?

來源

2017-09-14 10:22:55

不要使用複製的答案@heshan from https://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css –

正確閱讀他的評論@AnmolSandal 「請檢查此stackoverflow答案。通過CSS更改PNG圖像的顏色？」 – lpradhap

@AnmolSandal請檢查「請檢查此stackoverflow答案。通過CSS更改PNG圖像的顏色？」。你可以看到參考。因此，請在評論之前查看完整評論。 –

是的，你可以在CSS過濾器的幫助下做到這一點。

「顯示在元件之前的CSS過濾器屬性提供對像模糊或顏色效果上的元素的渲染移動。過濾器通常用於調整的圖像的呈現，一個背景，或邊框。」 克里斯 - Coyier

有看看這些網站：

CSS filter Property
Filters

來源

2017-09-14 10:41:12

CSS中的透明PNG圖像的背景顏色

回答

相關問題