CSS 轻松实现‘毛玻璃’效果

Posted 2023-04-04 羽毛儿1207

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 轻松实现‘毛玻璃’效果相关的知识，希望对你有一定的参考价值。

毛玻璃

1. backdrop-filt 属性

通过为元素添加backdrop-filter:blur(模糊值) 这个 CSS 属性，元素所在的区域后方包括后方的其他元素会模糊或颜色有所偏移，元素本身包括内部的元素、边框不会模糊。

未添加前：

添加 backdrop-filter: blur(3px); 后：（除此还添加了 border 以此突出毛玻璃所在范围）

注：元素或其背景色设置为透明色方可看见效果

// CSS 部分代码
.wrap .top 
            position: absolute;
            width: 300px;
            height: 100px;
            margin: 20px;
            border: 1px solid #000;
            background-color: transparent;
            backdrop-filter: blur(3px);//毛玻璃属性

<div class="wrap">
        <div class="top"></div> 
        //由于类名为 top 的 div 盒子绝对定位，脱离文档流，同时层级提升，因此 div 盒子的层级高于 p 段落的层级，
        //div 盒子会将 p 元素覆盖，位于 p 元素的上方，p 标签中的文字位于 div 盒子后方，在 div 盒子添加 backdrop：blur(3px)后，文字也就变模糊了
        <p>best wish for you</p>
        <p>少年如他</p>
    </div>

2. filter 属性

添加 filter 属性的元素本身包括内部元素、边框会发生模糊或颜色偏移，不会导致元素以外的其他元素发生模糊或颜色偏移。

3. backdrop-filter && filter

	backdrop-filter	filter
作用对象	元素后方区域（包括后方的元素）	元素本身（对后方区域或其他元素无效果)
无效对象	元素本身	后方区域或其他元素
注意事项	元素或背景最好设置透明色方可查看效果	/

如图所示：上方黑色边框盒子元素添加 backdrop-filter 属性；元素内部的文字（你好呀）和黑色边框并未模糊，后方的中英文和背景树模糊

下方红色边框盒子元素添加 filter 属性；元素内部的文字（少年如他）和红色边框模糊，而背景树未模糊

4. 参考资料

MDN

实现毛玻璃效果

使用CSS实现毛玻璃效果，使用CSS滤镜filter中的blur属性实现。

实现

首先定义一个填充满整个屏幕的背景。

<style type="text/css">
    body{
        width: 100vw;
        height: 100vh;
        margin: 0;
        background-image: url("http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
</style>

然后定义一个指定长宽的div去实现模糊效果，因为直接在元素上使用blur会将元素以及子元素全部模糊，显然不符合要求，于是使用一个伪元素去实现模糊效果。首先在元素CSS属性设置position: absolute;是为了伪元素去适应长宽使用，使用relative也是可行的，但是会影响下文会提到的拖拽的定位，在伪元素中设置position: absolute;top: 0;left: 0;right: 0; bottom: 0;来继承元素的尺寸，在伪元素中设置背景，在背景上实现模糊效果就可以避免子元素一并模糊的问题。

<style type="text/css">
.blur {
    position: absolute;
    overflow: hidden;
    z-index: 1;
    width: 500px;
    height: 300px;
    cursor: move;
}

.blur::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    margin: -30px;
    background-image: url("http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    filter: blur(10px);
}
</style>

为了更好的展示效果，实现了一个简单的拖拽功能。

<script type="text/javascript">
    var element = document.querySelector(".blur");
    element.onmousedown = function(event) {
        var event = event || window.event;
        var edgeX = event.clientX - element.offsetLeft;
        var edgeY = event.clientY - element.offsetTop; 
        document.onmousemove = function(event) {
            var event = event || window.event;
            var relativeX = event.clientX - edgeX;
            var relativeY = event.clientY - edgeY;
            element.style.left =  relativeX + "px";
            element.style.top = relativeY + "px";
            return false;
        };
        document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
        };
        return false;
    }
</script>

代码示例

<!DOCTYPE html>
<html>

<head>
    <title>毛玻璃效果</title>
    <style type="text/css">
    body {
        width: 100vw;
        height: 100vh;
        margin: 0;
        overflow: hidden;
        background-image: url("http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .container {
        width: 100vw;
        height: 100vh;
    }

    .x-y-center {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .blur {
        position: absolute;
        overflow: hidden;
        z-index: 1;
        width: 500px;
        height: 300px;
        cursor: move;
    }


    .blur::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        margin: -30px;
        background-image: url("http://www.sdust.edu.cn/__local/B/F3/E4/693AB931C9FFB84646970D53BFE_C506394A_4282CA.jpg");
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
        filter: blur(10px);
    }
    </style>
</head>

<body>
    <div class="container x-y-center">
        <div class="blur x-y-center">
            <div>Gaussian Blur</div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var element = document.querySelector(".blur");
    element.onmousedown = function(event) {
        var event = event || window.event;
        var edgeX = event.clientX - element.offsetLeft;
        var edgeY = event.clientY - element.offsetTop; 
        document.onmousemove = function(event) {
            var event = event || window.event;
            var relativeX = event.clientX - edgeX;
            var relativeY = event.clientY - edgeY;
            element.style.left =  relativeX + "px";
            element.style.top = relativeY + "px";
            return false;
        };
        document.onmouseup = function() {
            document.onmousemove = null;
            document.onmouseup = null;
        };
        return false;
    }
</script>

</html>

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://www.jb51.net/article/73157.htm
https://www.cnblogs.com/ivan5277/p/10007273.html
https://blog.csdn.net/u010852544/article/details/43967749

以上是关于CSS 轻松实现‘毛玻璃’效果的主要内容，如果未能解决你的问题，请参考以下文章

CSS3实现毛玻璃（图片模糊）效果

CSS实现背景图片模糊——毛玻璃效果 | 浅谈CSS属性 filterbackdrop-filter

仅使用 HTML 和 CSS 实现毛玻璃效果（Glassmorphism）

实现毛玻璃效果

css3毛玻璃模糊效果

转css3实现ios7“毛玻璃”模糊效果