使用CSS backdrop-filter 实现毛玻璃效果
2023-03-22 本文已影响0人
贺大大i
总结：
filter：该属性将模糊或颜色偏移等图形效果应用于元素。
backdrop-filter：该属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
注意两者之间的差异，filter 是作用于元素本身，而 backdrop-filter 是作用于元素背后的区域所覆盖的所有元素。
backdrop-filter 效果
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
max-width: 1920px;
max-height: 1080px;
background: linear-gradient(
270deg,
#e6f4fa 0%,
#fcf2e8 50%,
#f2edfa 100%
);
}
.wrapBox2 {
position: relative;
width: 228px;
height: 348px;
background: #ffffff;
border-radius: 10px;
margin: 100px auto;
}
img {
width: 228px;
height: 110px;
border-radius: 10px 10px 0px 0px;
}
.subBox {
position: absolute;
top: 0;
left: 0;
width: 228px;
height: 110px;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px 10px 0px 0px;
/* z-index: 9; */
backdrop-filter: blur(1px);
cursor: pointer;
}
.user {
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid #ccc;
}
.leave {
position: absolute;
bottom: 19px;
left: 12px;
width: 50px;
text-align: center;
height: 17px;
line-height: 17px;
background: #ffffff;
border-radius: 9px;
border: 1px solid #7700ff;
font-size: 12px;
}
.flex {
display: flex;
align-items: center;
margin: 30px 0 0 12px;
}
</style>
</head>
<body>
<div class="wrapBox2">
<img src="./编组 8.png" alt="" />
<div class="subBox">
<div class="flex">
<img src="./编组 8.png" class="user" alt="" />
<div style="margin-left: 8px">
<div style="color: #fff; margin-bottom: 3px">啤酒瓜子矿泉水</div>
<div style="color: rgba(255, 255, 255, 0.9)">食品饮料</div>
</div>
<div class="leave">Lv.6</div>
</div>
</div>
<div>抵达酒店订单</div>
</div>
</body>
</html>
在写项目的时候踩过一个坑就是吧backdrop-filter写在了img身上导致不生效
再看下 filter 实现的效果
image.png
是不是发现都变模糊了呢
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
max-width: 1920px;
max-height: 1080px;
background: linear-gradient(
270deg,
#e6f4fa 0%,
#fcf2e8 50%,
#f2edfa 100%
);
}
.wrapBox2 {
position: relative;
width: 228px;
height: 348px;
background: #ffffff;
border-radius: 10px;
margin: 100px auto;
}
img {
width: 228px;
height: 110px;
border-radius: 10px 10px 0px 0px;
}
.subBox {
position: absolute;
top: 0;
left: 0;
width: 228px;
height: 110px;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px 10px 0px 0px;
/* z-index: 9; */
/* backdrop-filter: blur(1px); */
filter: blur(1px);
cursor: pointer;
}
.user {
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid #ccc;
}
.leave {
position: absolute;
bottom: 19px;
left: 12px;
width: 50px;
text-align: center;
height: 17px;
line-height: 17px;
background: #ffffff;
border-radius: 9px;
border: 1px solid #7700ff;
font-size: 12px;
}
.flex {
display: flex;
align-items: center;
margin: 30px 0 0 12px;
}
</style>
</head>
<body>
<div class="wrapBox2">
<img src="./编组 8.png" alt="" />
<div class="subBox">
<div class="flex">
<img src="./编组 8.png" class="user" alt="" />
<div style="margin-left: 8px">
<div style="color: #fff; margin-bottom: 3px">啤酒瓜子矿泉水</div>
<div style="color: rgba(255, 255, 255, 0.9)">食品饮料</div>
</div>
<div class="leave">Lv.6</div>
</div>
</div>
<div>抵达酒店订单</div>
</div>
</body>
</html>
再看下总结回顾下或许豁然开朗
