效果图
HTML部分
<div class="content">
我在好几篇小说中都提到过一座废弃的古园,实际就是地坛。
许多年前旅游业还没有开展,园子荒芜冷落得如同一片野地,很少被人记起。
地坛离我家很近。或者说我家离地坛很近。总之,只好认为这是缘分。
<div class="mask">
<!-- <div class="btn">这是另外的价钱</div> -->
</div>
</div>
CSS部分
.content {
height: 300px;
width: 300px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
background-color: #f1eee9;
position: relative;
padding: 12px;
.mask {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
background-color: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(2px);// 数值越大越模糊
display: flex;
align-items: center;
justify-content: center;
// .btn {
// height: 52px;
// line-height: 52px;
// background: #255390;
// box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
// border-radius: 4px 4px 4px 4px;
// font-size: 16px;
// color: #fff;
// padding: 0 24px;
// cursor: pointer;
// }
}
}
你可能还想在遮罩中加个按钮什么的,比如这样?上面代码中注释掉的就是这个按钮,去掉注释就好了。
关键属性记录
background-color: rgba(0, 0, 0, 0.1);
backdrop-filter: blur(2px);// 数值越大越模糊