您现在的位置:爱折腾>> web>>正文内容

使用CSS实现网站黑白效果

效果大家都看到了,就是我网站现在这样子,淘宝啥的也黑白了。其实原理很简单,只要在你的网站的<body>里面加上下面一段代码:

  1. <style type="text/css">  
  2. html {  
  3. filter: url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale"); /* Firefox 3.5+ */ 
  4. filter: gray !important/* IE6+ */ 
  5. filter: grayscale(100%); /* Current draft standard */ 
  6. -webkit-filter: grayscale(100%); /* New WebKit */ 
  7. -moz-filter: grayscale(100%);  
  8. -ms-filter: grayscale(100%);  
  9. -o-filter: grayscale(100%);  
  10. }  
  11. * {  
  12. filter: gray !important/* IE6+ */ 
  13. }  
  14. </style>  

相关文章