CSS其他特性（了解）图片模糊处理

DIUDIUjiang

已于 2022-03-04 19:36:15 修改

阅读量330

点赞数 2

文章标签： css 其他 css3

于 2022-03-04 19:32:41 首次发布

本文链接：https://blog.csdn.net/DIUDIUjiang/article/details/123283649

版权

CSS3滤镜filter

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

  filter: 函数();  例如：filter:blur(5px); blur模糊处理 数值越大越模糊

不加模糊时代码及图片是这样的

<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>图像模糊处理filter</title>
    <style>
        img {
            width: 500px;
            height: 300px;
        }
    </style>
</head>

<body>
    <img src="./第五章 HTML5和CSS3【v6.5】/5-2 CSS3/tudou.jfif" alt="">
</body>

加了模糊后的代码及图片

<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>图像模糊处理filter</title>
    <style>
        img {
            width: 500px;
            height: 300px;
            /* blur是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位 */
            filter: blur(5px);
        }
    </style>
</head>

<body>
    <img src="./第五章 HTML5和CSS3【v6.5】/5-2 CSS3/tudou.jfif" alt="">
</body>

鼠标经过图片时图片变清晰

<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>图像模糊处理filter</title>
    <style>
        img {
            width: 500px;
            height: 300px;
            /* blur是一个函数 小括号里面数值越大，图片越模糊 注意数值要加px单位 */
            filter: blur(5px);
        }
        
        img:hover {
            filter: blur(0);
        }
    </style>
</head>

<body>
    <img src="./第五章 HTML5和CSS3【v6.5】/5-2 CSS3/tudou.jfif" alt="">
</body>

DIUDIUjiang

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
CSS其他特性（了解）图片模糊处理

CSS3滤镜filterfilter CSS属性将模糊或颜色偏移等图形效果应用于元素。 filter: 函数(); 例如：filter:blur(5px); blur模糊处理数值越大越模糊不加模糊时代码及图片是这样的<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo
复制链接

扫一扫