当前位置:Gxlcms > css > CSS3把图片变成灰色模式的实例

CSS3把图片变成灰色模式的实例

时间:2021-07-01 10:21:17 帮助过:40人阅读

这篇文章给大家分享了如何利用CSS3把图片变成灰色模式的效果,实现起来很简单,有需要的朋友们可以参考借鉴。

实例代码:

代码如下:

<!DOCTYPE html>
<html>
<head>
 <meta charset="{CHARSET}">
 <title></title>
 <style type="text/css">
  .gray {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
   filter: grayscale(100%);
   filter: gray;
  }
  img{width:400px;}
 </style>
</head>
<body>  
 <img class="gray" src="<a href="http://b.hiphotos.baidu.com/zhidao/pic/item/1c950a7b02087bf4fbb05256f0d3572c11dfcf35.jpg">http://www.gxlcms.com/;/a>">
 <img class="gray"  src="<a href="http://c.hiphotos.baidu.com/zhidao/pic/item/03087bf40ad162d9e0c359f214dfa9ec8a13cd2a.jpg">http://www.gxlcms.com/;/a>" />
 <img src="<a href="http://b.hiphotos.baidu.com/zhidao/pic/item/1c950a7b02087bf4fbb05256f0d3572c11dfcf35.jpg">http://www.gxlcms.com/;/a>">
 <img src="<a href="http://c.hiphotos.baidu.com/zhidao/pic/item/03087bf40ad162d9e0c359f214dfa9ec8a13cd2a.jpg">http://www.gxlcms.com/;/a>"  c/>
</body>
</html>

总结
以上就是这篇文章的全部内容,希望大家能喜欢,谢谢大家对PHP中文网的支持。

更多CSS3把图片变成灰色模式的实例相关文章请关注PHP中文网!

人气教程排行