先上效果圖：
之前：?
之后：
實現(xiàn)方式：
第一種：兩張圖片疊加，上面放一個純白色的着饥，下面放這張清晰的醫(yī)生的圖
第二種：背景圖片上面，使用一層遮罩井赌，設計背景色為純白色，并且是有一定透明度的
<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);
? ? ? ? }
