所爱穿山海 山海皆可平
.mbl {
width: 20em;
height: 20em;
background: url(img/1.jpg);
background-size: cover;
overflow: hidden;
margin: 30px;
}
.text {
width: 18em;
height: 18em;
margin: 1em;
background: hsla(0, 0%, 100%, .4);
color: black;
text-align: center;
overflow: hidden;
position: relative;
}
.text::before {
position: absolute;
background: url(img/1.jpg);
background-size: cover;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
filter: blur(20px);
/* background: rgba(225, 0, 0, 0.5);*/
}
.text blockquote {
height: inherit;
width: inherit;
display: table-cell;
vertical-align: middle;
position: relative;
}
这样就可以实现了 主要就是 要设置模糊背景的地方通过伪元素设置背景颜色或图片 区域relative定位 伪元素absolute定位 这样才能让伪元素的大小完全等于本来区域的大小 然后用blur滤镜进行模糊处理
