背景图片模糊，其中文字清晰实现方法总结

先上效果图：

之前： 

之后：

实现方式：

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

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

       

背景模糊文字内容不模糊

   

.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);

        }