css设置背景图片模糊,文字清晰展示
使用filter: blur来实现,blur的值越大越模糊
效果图:
html:
<div class="box">
<p>css设置背景图片模糊,文字清晰展示</p>
</div>
css样式:
.box {
width: 300px;
height: 300px;
position: relative;
}
.box::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url('../../resource/image/login_bg.jpg');
filter: blur(8px);
}
p {
color: white;
position: relative;
z-index: 1;
font-size: 30px;
}