我正在从灰度过渡到彩色化,它的工作原理是铬,但就是这样。
这是HTML:
<div id="post" style="background-image:url('bg.png');background-repeat:no-repeat;"> <p><a href="/post.PHP?id=1">Title - Date</a></p> </div>
这是CSS:
#post{ padding:0; margin:0 auto; margin-bottom:25px; border:solid 1px #000; height:150px; width:750px; display:block; filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale"); filter: gray alpha(opacity=50); -webkit-filter: grayscale(50%); -webkit-transition: 0.3s all ease; -o-transition: 0.3s all ease; -moz-transition: 0.3s all ease; transition: 0.3s all ease; -webkit-backface-visibility: hidden; } #post:hover{ filter: none; -webkit-filter: grayscale(0%); }
感谢任何帮助,它的赞赏。
解决方法
尝试将#post:hover设置为:
filter:grayscale(0%); -webkit-filter: grayscale(0%); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0,0 1 0 0 0,0 0 1 0 0,0 0 0 1 0\'/></filter></svg>#grayscale");
你可以在这里查找。 http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/
如果教程链接将死亡
适用于:Safari 6.1.1,Firefox 26.0,Chrome 32.0.1700.77
.slides li img{ filter: grayscale(100%); -webkit-filter: grayscale(100%); /* For Webkit browsers */ filter: gray; /* For IE 6 - 9 */ -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */ filter: url("data:image/svg+xml;utf8,<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>#grayscale"); /* Firefox 10+,Firefox on Android */ } .slides li img:hover{ filter: grayscale(0%); -webkit-filter: grayscale(0%); filter: url("data:image/svg+xml;utf8,0 0 0 1 0\'/></filter></svg>#grayscale"); }
正如亚当所指出的:从Firefox 35过滤器:灰度级(100%);应该工作
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。