先上效果图:
之前:
之后:
实现方式:
第一种:两张图片叠加,上面放一个纯白色的,下面放这张清晰的医生的图
第二种:背景图片上面,使用一层遮罩,设计背景色为纯白色,并且是有一定透明度的
背景模糊文字内容不模糊
.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);
}
如果觉得《div图片背景虚化不影响图片上的文字_背景图片模糊 其中文字清晰实现方法总结...》对你有帮助,请点赞、收藏,并留下你的观点哦!