Question

我有兴趣动态修改具有透明背景的图像，并使用CSS实现这一目标。

我真正需要的是创建一种轮廓，以便所有非透明像素都应用了它们。在这种情况下，黑色。

之前和之后应该看起来像这样：

请注意，这两张图片都具有透明背景。

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

如果没有，是否有一种简单的方法可以生成剪影并在客户端的网页上下文中切换两个图像？可以假设现代浏览器。

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

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/

请注意this method won't be support on all browsers。要支持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/

Answer 2

您需要的是两件事：

确保图像将始终成为具有透明背景的PNG
使用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

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

2 个答案:

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

支持所有颜色的改进示例