聊天平台源码,背景显示使用仿磨砂玻璃样式
聊天平台源码,背景显示使用仿磨砂玻璃样式实现的相关代码
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%);
}
以上就是聊天平台源码,背景显示使用仿磨砂玻璃样式实现的相关代码, 更多内容欢迎关注之后的文章