CSS中透明PNG圖像的背景顏色
[英]Background color over transparent PNG image in CSS
問題描述
實際上可以在CSS中的透明PNG圖像上應用背景色嗎？ 這是一個例子：
使用CSS可以轉換此圖像
帶有CSS代碼（例如background-color: rgba(0,0,300,.5)
全部包含完整的CSS（當然還有HTML）？
謝謝。
4 個解決方案
解決方案1
3 2017-09-14 10:22:34
使用CSS過濾器
從Chris Coyier撰寫的有關過濾器的文章中：
CSS濾鏡是功能強大的工具，作者可以用來實現各種視覺效果（類似於瀏覽器的Photoshop濾鏡）。 CSS
filter屬性可在顯示元素之前訪問元素渲染上的模糊或顏色偏移等效果。
- 模糊（）
- 亮度（）
- 對比（）
- 落的陰影（）
- 灰度（）
- 色調旋轉（）
- 倒置（）
- 不透明度（）
- 飽和（）
- 棕褐色（）
過濾樣本 （基於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" />
解決方案2
2 2017-09-14 10:41:12
解決方案3
1 已采納 2017-09-14 10:24:29
您無法使用background-color來實現此效果，因為應用於上覆元素的透明背景色也會始終影響PNG圖像的透明部分。
您需要CSS過濾器 hue-rotate() （將圖像顏色旋轉為紫色）和brightness() （使圖像更暗）：
img { filter: hue-rotate(230deg) brightness(60%); }
<img src="https://i.stack.imgur.com/nPnsV.png" />
有關CSS過濾器的更多信息，請參見MDN。 關於CSS過濾器的CSS技巧 ，還有一篇有用的文章 。
解決方案4
-1 2017-09-14 10:22:55
您不能根據需要從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%);}
請檢查此stackoverflow答案。 通過CSS更改PNG圖像的顏色？
透明的PNG圖像不考慮背景色，並且表現為不透明
[英]Transparent PNG image doesn't regard background color, and acts as not transparent
在用戶提交的背景圖像上添加過濾器或透明 .png
[英]Adding filter or transparent .png over a user submitted background image
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.