真的可以在 CSS 中对透明的 PNG 图像应用背景色吗？这是一个例子：
使用 CSS，转动这张图片
使用像background-color: rgba(0,0,300,.5)这样的CSS代码
全部是完整的 CSS（当然还有 HTML）？
谢谢。
【问题讨论】：
标签： html css png background-color
是的，您可以借助 CSS 过滤器来做到这一点。
“CSS 过滤器属性提供对模糊或颜色等效果的访问 在元素显示之前切换元素的渲染。 过滤器通常用于调整图像的渲染， 背景或边框。” – 克里斯·科耶尔
看看这些网站：
【讨论】：
使用 CSS 过滤器
来自 Chris Coyier 关于filters 的文章：
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" />【讨论】：
您无法使用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。还有一个有用的article on CSS Tricks 用于 CSS 过滤器。
【讨论】：
background-color: rgba(0,300,0,.15) 一样？
您不能随意从 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 答案。 Change color of PNG image via CSS?
【讨论】：