背景
最近，因为都知道的原因，各大网站首页变灰了，于是乎想着如何实现。首先
实战
1.写了个简单页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .conainer{ height: 800px; width: 800px; } .box{ height: 100px; width: 800px; background:green; } h1{ color: red; } </style> </head> <body > <div class="box"></div> <div class="conainer"> <h1>图片</h1> <img src="./245.jpg" alt="" width="100%"> </div> </body> </html>
这个demo里面想着，文字和div快好说，加个css就可改变灰色，那图片是怎么变灰色的呢？
关键代码，只要2个css就可以实现
body { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; } html { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); _filter:none; }
效果如下:
原理
这其实这个css3的filter色相饱和度的这个属性的使用:
具体用法，可以参考菜鸟教程.
大功告成!!!
