胖蔡叨叨叨
你听我说

CSS通过blur实现高斯模糊

通常的,CSS中我们可以通过blur(radius)函数实现高斯模糊,blur函数也是CSS中滤镜函数使用频率较高的一个,通过高斯模糊设置可以让我们的输出图像具有更好的呈现。函数格式如下:

blur(radius)
  • radius:radius一般用于设置模糊半径,值越大,模糊程度越大,当值为0的时候图像与原图保持一致。支持数据格式如:em、rem、px、ex、ic、rlh、vh、vw、vi、vmin、vmax、vb、cm、mm、in、pc等。

浏览器兼容性

blur函数所有浏览器均支持。

示例

如下通过一个示例来看下设置高斯模糊的效果。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>通过blur设置图片高斯模糊</title>

    <style>
        * {
            box-sizing: border-box;
        }

        body {
            min-height: 100vh;
            display: grid;
            /* 1ch 等于一个 0 的宽度 */
            /* 1ch = 1个英文 = 1个数字 */
            /* 2ch = 1个中文 */
            /* auto-fill;
            如果容器大小不固定,项目大小固定,可以用auto-fill关键字自动填充; */
            /* 列 自动填充列,每列为30个字符宽度 */
            grid-template-columns: repeat(auto-fit, 30ch);
            place-content: center;
            /* 每个网格的间距为 5vh */
            grid-gap: 5vh;
            margin-left: auto;
            margin-right: auto;
            padding: 1rem;
        }

        #template {
            background: #fff;
            padding: 1rem;
            border-radius: 7px;
            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.13);
            /* height: 25vh; */
            /* 网格布局 */
            display: grid;
            /* grid-gap:20px 20px; */
            /* row-gap和column-gap简写形式;行间距和列间距 */
            grid-gap: 0.5rem;
            width: 600px;
        }

        .col {
            /* background-color: #7B86F5; */
            background-color: #fff;
            border-radius: 4px;
            display: grid;
            place-items: center;
            color: #fff;
            font-size: 1.5rem;
            text-align: center;

        }

        .col span {
            color: black;
            margin-top: 8px;
            font-size: 12px;
        }

        .col img {
            width: 160px;
            height: 60px;
        }

        .template-col {
            grid-template-columns: repeat(3, 1fr);
        }

        .img1 {
            filter: blur(3px);
        }

        .img2 {
            filter: blur(.3em);
        }
    </style>
</head>

<body>
    <div id="template" class="template-col">
        <div class="col">
            <img decoding="async" src="http://oss.enjoytoday.cn/wp-content/uploads/2022/10/image-111.png"
                alt="Smiley face">
            <span>原图</span>
        </div>
        <div class="col">
            <img class="img1" decoding="async" src="http://oss.enjoytoday.cn/wp-content/uploads/2022/10/image-111.png"
                alt="Smiley face">
            <span>模糊半径3px</span>
        </div>
        <div class="col">
            <img class="img2" decoding="async" src="http://oss.enjoytoday.cn/wp-content/uploads/2022/10/image-111.png"
                alt="Smiley face">
            <span>模糊半径0.3em</span>
        </div>
    </div>


</body>

</html>

效果展示

其他

源码地址查看:CSS之Blur函数实现高斯模糊

更多相关CSS函数指南:CSS函数你知道多少?

赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » CSS通过blur实现高斯模糊
分享到: 更多 (0)

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #0

    Very good article. I absolutely love this site. Thanks!

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏