div图片背景虚化不影响图片上的文字_背景图片模糊，其中文字清晰实现方法总结...

先上效果图：

之前：

之后：

实现方式：

第一种：两张图片叠加，上面放一个纯白色的，下面放这张清晰的医生的图

第二种：背景图片上面，使用一层遮罩，设计背景色为纯白色，并且是有一定透明度的

背景模糊文字内容不模糊

.box{

background: url("images/homebgper.png") no-repeat;

background-size: cover;

width:500px;

height: 300px;

position: relative;

}

.content{

position: absolute;

left:0;

right:0;

top:0;

bottom: 0;

width:500px;

height: 300px;

background: rgba(255,255,255,0.82)

}

第三种：使用伪元素before，在伪元素上设置尺寸和元素相同，并且背景图片设置在伪元素上，

背景模糊文字内容不模糊

.box{

width:500px;

height: 300px;

}

.box::before{

background: url("images/homebgper.png") no-repeat;

background-size: cover;

width:500px;

height: 300px;

content: "";

position: absolute;

top:0;

left:0;

z-index:-1;

opacity: 0.18;

}

第四种： 文字和背景图片所在容器不是父子关系，是兄弟关系

背景模糊文字内容不模糊

.content {

color: #000000;

font-size: 40px;

position:absolute;

}

.box{

background: url('images/homebgper.png') no-repeat;

height: 300px;

width:500px;

float: left;

background-position: center;

background-size: cover;

-webkit-filter: blur(2px);

-moz-filter: blur(2px);

-o-filter: blur(2px);

-ms-filter: blur(2px);

filter: blur(2px);

}