先上效果图：
之前：
之后：
实现方式：
第一种：两张图片叠加，上面放一个纯白色的，下面放这张清晰的医生的图
第二种：背景图片上面，使用一层遮罩，设计背景色为纯白色，并且是有一定透明度的
<div class="box">
<div class="content">背景模糊文字内容不模糊</div>
</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，在伪元素上设置尺寸和元素相同，并且背景图片设置在伪元素上，
<div class="box">
<div class="content">背景模糊文字内容不模糊</div>
</div>
.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;
}
第四种： 文字和背景图片所在容器不是父子关系，是兄弟关系
<div>
<div class="box"></div>
<div class="content">背景模糊文字内容不模糊</div>
</div>
.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);
}
