聊天平台源码，背景显示使用仿磨砂玻璃样式

聊天平台源码，背景显示使用仿磨砂玻璃样式实现的相关代码

1.body内容

 

<div class="div-background">
    <div class="div-shadow">
        <div class="glass"></div>
        <div class="glass-txt">:o  原来我是一块玻璃</div>
    </div>
</div>

​

2.css样式

 

    body, html {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
 
    }
    *, *:before, *:after {
        box-sizing: border-box;
    }
    .div-background{
        height: 100%;
        width: 100%;
        background-image: url("https://w.wallhaven.cc/full/pk/wallhaven-pkkm6p.png");
        background-size: cover;
        background-position: center;
    }
    .glass {    /*插入图片设置滤镜并且定位到中间*/
        height: 100%;
        width: 100%;
        background-image: url("https://w.wallhaven.cc/full/pk/wallhaven-pkkm6p.png");
        background-size: cover;
        background-position: center;
        filter: blur(20px);         /*模糊滤镜*/
        clip-path: inset(20%);      /*切割20%*/
    }
    .div-shadow {
        height: 100%;
        width: 100%;
        filter: drop-shadow(0px 20px 10px rgba(0, 0, 0, 0.3));
        display: flex;
        justify-content: center;
    }
    .glass-txt{
        position: absolute;
        font-size: 40px;
        color: white;
        top: 50%;
        transform: translate(0, -50%);
    }

 

以上就是聊天平台源码，背景显示使用仿磨砂玻璃样式实现的相关代码， 更多内容欢迎关注之后的文章