css常见效果——毛玻璃效果

最新推荐文章于 2023-08-21 12:01:08 发布

ainuo5213

最新推荐文章于 2023-08-21 12:01:08 发布

阅读量742

点赞数 1

分类专栏： css3好看的效果文章标签： css3 毛玻璃效果 html

本文链接：https://blog.csdn.net/qq_40566547/article/details/100108773

版权

css3好看的效果专栏收录该内容

5 篇文章 1 订阅

订阅专栏

通常来将，我们实现毛玻璃效果或者说高斯模糊都是用html5的canvas效果。
其实css3有个很好的属性来实现——filter；
话不多说，直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="wrapper">
    <div class="article blur">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, earum est fugiat iusto maiores molestiae nisi nobis non possimus quas qui quidem reiciendis repellendus suscipit unde vero. Minus, quaerat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias dolore, earum est fugiat iusto maiores molestiae nisi nobis non possimus quas qui quidem reiciendis repellendus suscipit unde vero. Minus, quaerat.</p>
    </div>
</div>
</body>
</html>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html, body {
            width: 100%;
            height: 100%;
        }
        .wrapper {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: url("./壁纸.jpg") no-repeat center center fixed;
        }

        .article {
            box-sizing: border-box;
            padding-left: 20px;
            width: 50%;
            height: 300px;
            position: relative;
            z-index: 1;
            margin: 180px auto;
            background-position: center top;
            background-size: cover;
            line-height: 40px;
            overflow: hidden;
        }

        p {
            text-indent: 2em;
            display: inline-block;
            width: 100%;
        }
		/* 必须用伪元素实现，调整z-index。伪元素宽高为元素宽高：用top,left,bottom,right: 0 实现*/
        .blur::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url("./壁纸.jpg") no-repeat center center fixed;
            z-index: -1;
            filter: blur(20px);
            margin: -30px;
        }

    </style>

实现效果如下：
在这里插入图片描述
关于滤镜方面，可详细查看css解密一书

ainuo5213

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css常见效果——毛玻璃效果

通常来将，我们实现毛玻璃效果或者说高斯模糊都是用html5的canvas效果。其实css3有个很好的属性来实现——filter；话不多说，直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title...
复制链接

扫一扫