实现毛玻璃效果

实现毛玻璃效果

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

实现#

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

Copy
<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;来继承元素的尺寸，在伪元素中设置背景，在背景上实现模糊效果就可以避免子元素一并模糊的问题。

Copy
<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>

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

Copy
<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>

代码示例#

Copy
<!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>

每日一题#

Copy
https://github.com/WindrunnerMax/EveryDay

参考#

Copy
https://www.jb51.net/article/73157.htm
https://www.cnblogs.com/ivan5277/p/10007273.html
https://blog.csdn.net/u010852544/article/details/43967749
posted @   WindRunnerMax  阅读(252)  评论(0)  编辑  收藏  举报
编辑推荐：
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
阅读排行：
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
点击右上角即可分享
微信分享提示
CONTENTS
✕