我的代码中有以下图标:
HTML:
<a href="#" id="PickUp" class="PickUpIcon"></a>
CSS:
width: 24px;
height: 24px;
background: url(../images/Icons/Answer.jpg) no-repeat;
cursor: pointer;
它看起来像这样:
我想(使用 css、js 或 jQuery)将这个图标变成这样:
意思是将彩色图标变成黑白图标,可以吗?
我正在使用 html 4、CSS2 和 IE 8(我不能使用 HTML5 或其他浏览器)
我知道我可以使用 2 个不同的图标,但我想知道是否还有另一种可能性,因为可以动态添加图标,我不希望每个人都需要提供 2 个图标。
最佳答案
你可以用 SVG 来做
检查这个答案 https://stackoverflow.com/a/8612047/1033200
<svg xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/>
</filter>
</svg>
然后使用这个 CSS:- [ Demo ]
img {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
要在悬停时禁用灰度,您可以使用:-
img:hover {
filter: none;
-webkit-filter: grayscale(0);
}
关于javascript - 把图标变成黑白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15108417/