用CSS覆盖图像的非透明区域

Question

我想动态修改一个带有透明背景的图像，并使用CSS实现此目的。

实际上我需要创建一种剪影效果，使所有非透明像素都应用一种颜色。在这种情况下是黑色。

前后效果应该类似于：

注意两个图像都有透明背景。

是否有一种可以使用CSS执行此操作的方法？

如果没有，在客户端网页环境中是否有一种简单的方法生成剪影并在两个图像之间切换？假设使用的是现代浏览器。

非常感谢任何形式的帮助。

- Selfish

---

使用图像编辑器或某种编程语言。这不是CSS的工作。 - user4639281

这可以通过CSS完成，给我几分钟。 - knocked loose

滤镜：灰度（100％）对比度（0％）亮度（0％）; 你可以尝试调整它，但我猜它不能完全符合你的需求。 - pkn

@TinyGiant 这对于 CSS 来说是一项很棒的工作，它更加灵活：您可以处理任何上传的图像，而无需服务器图像处理开销，并且对于内部网站可能准备的图像，您不需要每个管理员都能够使用 Photoshop。 - Toni Leigh

@Toni 我仍然不会使用CSS来做这件事。 - user4639281

Answer 1

使用webkit滤镜可以实现这样的效果：

img {
    -webkit-filter: grayscale(100%);
    -webkit-filter: contrast(0%);
    -webkit-filter: brightness(0%);
}

img:hover {
    -webkit-filter: grayscale(0%);
    -webkit-filter: contrast(100%);
    -webkit-filter: brightness(100%);
}

并提供一个jsfiddle演示：http://jsfiddle.net/7Ljcgj79/

请注意，这种方法不支持所有浏览器。要支持IE，你可以将其设置为background-image，并在悬停时更改它。

---

使用两个图像以获得更好的浏览器兼容性

如果你愿意使用两个图像，你可以通过简单地在hover时切换图片来实现相同的效果，从而获得更广泛的浏览器支持。类似这样：

div {
    height: 400px;
    width: 400px;
    background-image: url('http://i.stack.imgur.com/Pmz7l.png');
    background-repeat: no-repeat;
}

div:hover {
    background-image: url('http://i.stack.imgur.com/gZw5u.png');
}

这是一个更新的示例：http://jsfiddle.net/7Ljcgj79/2/

---

支持所有颜色的改进示例

我有一段时间没访问过这篇帖子，现在我确实看到它可以被改进（只需要将亮度设置为0％，不需要任何其他操作，实际上也没有产生任何效果）。但是，针对一条评论，我想提供一个更新的答案。这个解决方案需要做更多的工作，但支持所有颜色，而不仅仅是黑色！以下是重要的部分：

HTML

<svg>
    <filter id="monochrome" color-interpolation-filters="sRGB">
        <!-- change last value of first row to r/255 -->
        <!-- change last value of second row to g/255 -->
        <!-- change last value of third row to b/255 -->
        <feColorMatrix type="matrix" 
            values="0 0 0 0 0.6588 
                    0 0 0 0 0.4745 
                    0 0 0 0 0.1686 
                    0 0 0 1 0" />
    </filter>
</svg>

CSS

img {
    -webkit-filter: url(#monochrome);
    filter:  url(#monochrome);
}

img:hover {
    filter: none;
}

这里是更新后的演示: http://jsfiddle.net/7Ljcgj79/16/

这种技术利用了<fecolormatrix>，它基本上是一个高级功能，可以用来定义自己的滤镜。我在这里所做的是将所有颜色通道都降至零（前四列均为零），然后向它们添加所需的常量值（即最后一列）。请确保在你的<filter>标签中设置type="matrix"，并在<fecolormatrix>中设置color-interpolation-filters="sRGB"，否则它会解释您的矩阵不同。

如果你想学更多，这些帖子非常有用：https://alistapart.com/article/finessing-fecolormatrix和https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/

- Platte Gruber

---

干得好，我知道这是过滤器，只是我没有使用它们足够多以便快速回答 - 你应该链接到一些浏览器支持的东西，我认为这在这个例子中很重要。 - Toni Leigh

不必局限于 Webkit：http://jsfiddle.net/orvn/7Ljcgj79/1/（不兼容 IE） - Orun

@NitaiJ.Perez 如果您需要更多的浏览器支持，请查看更新后的答案。 - Platte Gruber

{btsdaf} - Dylan Anlezark

{btsdaf} - Platte Gruber

Answer 2

你需要的是两件事情：

1. 确保图像始终为带有透明背景的PNG格式
2. 使用filter属性。

HTML

<img src="http://www.iceni.com/blog/wp-content/uploads/2013/08/EBay_logo.png">

CSS

img{
    -webkit-filter: drop-shadow(20px 0px 2px rgb(0,0,0));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#000')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#000')";
}

这里有一个JSFiddle

- knocked loose

---

谢谢您的评论！在Edge/IE上对我而言失败了。 - Selfish