问题描述
我有兴趣动态修改具有透明背景的图像,并使用CSS来实现.
I am interested in dynamically modifying an image with transparent background, and achieving that using CSS.
我真正需要的是创建一种轮廓,以便所有非透明像素都具有一种颜色.在这种情况下,黑色.
What I actually need, is creating a kind of a silhouette, so that all non-transparent pixels, have a color applied to them. In this case, Black.
前后应该看起来像这样:
The before and after should look something like this:
请注意,这两张图片的背景都是透明的.
Note both images have a transparent background.
是否可以使用CSS来执行此操作?
Is there a method that can be used to perform this using CSS?
如果没有,是否存在一种简便的方法来生成轮廓并在网页上下文中的客户端上在两个图像之间切换?可以假定使用现代浏览器.
If not, is there an easy way to generate the silhouette and switch between the two images, on the client side, in a webpage context? Modern browsers can be assumed.
任何帮助都将不胜感激.
Any kind of help is greatly appreciated.
推荐答案
使用webkit过滤器可以达到这样的效果:
An effect like this can be achieved using webkit filters:
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/
and a jsfiddle to demonstrate: http://jsfiddle.net/7Ljcgj79/
请注意,并非所有浏览器都支持此方法.要支持IE,您可以将其设置为background-image
并在悬停时进行更改.
Note that this method won't be support on all browsers. To support IE, you could set this as a background-image
and change it on hover.
如果您愿意使用两个图像,则只需在hover
上交换图像就可以在更广泛的浏览器支持下达到相同的效果.像这样:
If you're willing to use two images, you can achieve the same effect with much wider browser support by simply swapping the image on hover
. Something like this:
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%,没有其他必要,并且实际上没有任何作用).我想给出一个更新的答案,以回应评论.该解决方案需要更多的工作,但支持所有颜色,而不仅仅是黑色!这是重要的位:
I hadn't visited this post in awhile, and I definitely see now that it could have been improved (all I had to do was set brightness to 0%, nothing else was necessary and in fact had no effect). I wanted to give an updated answer, though, in response to a comment. This solution takes a little more work, but supports all colors, not just black! Here are the important bits:
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"
,否则它将不同地解释矩阵.
This technique takes advantage of the <fecolormatrix>
, basically an advanced feature for defining your own filters. What I did here was to turn all color channels down to zero (all zeros for the first four columns), then add to them the constant value that I needed (that's the last column). Make sure in your <filter>
tag to have type="matrix"
and and in your <fecolormatrix>
set color-interpolation-filters="sRGB"
or it will interpret your matrix differently.
如果您想了解更多信息,这些帖子非常有用: https://alistapart.com/article/finessing-fecolormatrix 和 https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/
These posts were super helpful if you want to learn more: https://alistapart.com/article/finessing-fecolormatrix and https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/
这篇关于用CSS覆盖图像的非透明区域的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!