html – 悬停时的黑白CSS背景

发布时间：2020-12-14 18:41:45 所属栏目：资源来源：网络整理

导读：我有一个CSS精灵像： HTML a id="estates" href="http://www.domain.com/estate"/a CSS #estates {background-position: -200px 0px;width: 96px;height: 90px;}#estates {background: url("http://www.domain.com/images/sprite.png") no-repeat scroll 0%

我有一个CSS精灵像：

HTML

<a id="estates" href="http://www.domain.com/estate"></a>

CSS

#estates {background-position: -200px 0px;width: 96px;height: 90px;}

#estates {background: url("http://www.domain.com/images/sprite.png") no-repeat scroll 0% 0% transparent;float: left;margin: 22px -2px 30px 33px;}

我希望当用户将鼠标悬停在链接上时将图像颜色更改为黑白或者如果不能发生则覆盖透明png？

解决方法

您可以查看CSS灰度过滤器.它符合以下方面：

#estates:hover {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */;
}

只是不要忘记添加浏览器支持所需的其他一百件内容

我找到了其他一百件东西并添加了它们.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!