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

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

1.body内容

 

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

​

2.css样式

 

1

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

 

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