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

最新推荐文章于 2021-06-04 17:49:34 发布

三条石

最新推荐文章于 2021-06-04 17:49:34 发布

阅读量94

点赞数

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

三条石

关注

0
点赞
踩
0

收藏

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

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

扫一扫