添加鼠标经过图片灰变彩CSS样式

弋牧 2016-05-20 00:00 4916次浏览 0 条评论生命不休，折腾不止

之前一直挺喜欢这个图片特效，但是一直没有弄明白CSS样式修改代码，也就一直拖着没有修改。后来添加明暗图片特效，不过还是比较喜欢现在的这种效果。

这里主要讲述副站鼠标经过图片时从灰色变为彩色CSS样式代码。演示请用鼠标滑过下面的图片查看：

注：对于一些版本底的浏览器支持效果并不太好！

好了，不啰嗦了，下面为CSS样式代码

/* 鼠标经过图片灰色变彩色 */
img{
-webkit-filter: grayscale(1);
}
img:hover{
-webkit-filter: grayscale(0);
}

另外，这里再写一个整站变为黑白包括页面样式、链接、图片等网站所有内容修改为黑白，此种效果一般常用于特大灾害净网时，如：汶川地震

/* 网站黑白代码 */  
html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); 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"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);}