您的位置：首页 > Web前端 > CSS

使用CSS将图片转换成黑白(灰色、置灰)

2017-08-21 22:01 701 查看
可能早就知道，像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;)，不过，当时，其他浏览器是无解的。不过，时代发展，如今，CSS3的逐步推进，我们也开始看到“黑白效果”大规模应用于实际的可能。

图片效果如下



代码如下，兼容IE浏览器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片灰色蒙版</title>
<style>
img {
width:300px;
height:300px;
}
.gray {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
</style>
</head>
<body>
<img src="img/timg.jpg">
<img src="img/timg.jpg" class="gray">
</body>
</html>


还有很多方法原内容博主写的很不错，在这里推荐下：http://www.zhangxinxu.com/wordpress/2012/08/css-svg-filter-image-grayscale/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航