div图片背景虚化不影响图片上的文字

所爱穿山海 山海皆可平

.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滤镜进行模糊处理