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

最新推荐文章于 2024-01-24 09:39:01 发布

泥猴桃

最新推荐文章于 2024-01-24 09:39:01 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/shi851051279/article/details/77461072

版权

css 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

css3

7 篇文章 1 订阅

订阅专栏

可能早就知道，像汶川这种糟糕的日子网站全灰在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/

泥猴桃

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用CSS将图片转换成黑白(灰色、置灰)

可能早就知道，像汶川这种糟糕的日子网站全灰在IE下是可以轻松实现的(filter: gray;)，不过，当时，其他浏览器是无解的。不过，时代发展，如今，CSS3的逐步推进，我们也开始看到“黑白效果”大规模应用于实际的可能。图片效果如下代码如下，兼容IE浏览器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <
复制链接

扫一扫

专栏目录