Question

是否可以在CSS中的透明PNG图像上应用背景色？这是一个例子：

使用CSS，转动此图片

使用像background-color: rgba(0,0,300,.5)

这样的CSS代码

全部是CSS（当然还有HTML）？

感谢。

Answer 1

使用CSS过滤器

Chris Coyier关于filters的文章：

CSS过滤器是作者可以用来实现的强大工具   不同的视觉效果（有点像Photoshop滤镜   浏览器）。 CSS array(3) { [0]=> array(3) { ["tp"]=> string(1) "g" ["h"]=> string(1) "a" ["t"]=> string(2) "18" } [1]=> array(3) { ["tp"]=> string(1) "g" ["h"]=> string(1) "a" ["t"]=> string(1) "8" } [2]=> array(3) { ["tp"]=> string(1) "c" ["h"]=> string(1) "h" ["t"]=> string(1) "3" } }属性提供对像这样的效果的访问   在元素之前的元素渲染上模糊或颜色偏移   显示。


模糊（）

亮度（）

对比度（）

下拉阴影（）

灰度（）

色调旋转（）

转化（）

不透明度（）

饱和（）

乌贼（）

过滤样本（基于W3S）：

＆＃13;

filter

＆＃13;

关于悬停效果：

＆＃13;

<!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>

＆＃13;

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

＆＃13;

Answer 2

是的，您可以借助CSS过滤器来完成。

“CSS过滤器属性提供对模糊或颜色等效果的访问在元素显示之前移动元素的渲染。过滤器通常用于调整图像的渲染，a 背景或边界。“ - Chris Coyier

看看这些网站：

CSS filter Property
Filters

Answer 3

使用background-color无法达到此效果，因为应用于上层元素的透明背景颜色也会始终影响PNG图像的透明部分。

您需要CSS filters hue-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。

Answer 4

您无法根据需要更改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

请检查此stackoverflow答案。 Change color of PNG image via CSS?

CSS中透明PNG图像的背景颜色

4 个答案: