Css3 将网页变成黑白_Css3 网页黑白滤镜filter

一、Css3 将网页变成黑白_Css3 网页黑白滤镜filter

重点代码：

        html,
        body {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray;
        }

 

全部代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray;
        }

        .red {
            color: red;
        }
    </style>
</head>

<body>
    <p>测试文字</p>
    <h1 class="red">红色文字</h1>

    <img src="http://www.jnqianle.cn/upload/logo/content/202204/01/3b68f8d0-cdb3-49cb-b4e9-d518700047b6.jpg" width="500" alt="">
</body>

</html>

 

 

效果：

 

 

更多：

 CSS Blur() 将高斯模糊应用于输出图片

Canvas模糊化处理图片、毛玻璃处理图片之stackblur.js

网页中实现图片的毛玻璃效果

posted @ 2022-12-02 18:34  天马3798  阅读(129)  评论(0)  编辑  收藏  举报