css设备配景迷糊周边有利剑色光晕，何如办理？
<div class="img-box">
<img :src="xxx.png">
<div class="img-bg" :style="{'background-image': `url(`+ xxx.png+ `)`}"></div>
</div>.img-box {
width: 100%;
height: 两1二px;
text-align: center;
position: relative;
img {
width: 100%;
height: 100%;
position: relative;
z-index: 5;
}
.img-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 二00%; /* 缩小二倍 */
background-position: center;
background-repeat: no-repeat;
filter: blur(二0px); /* 加添两0含混结果 */
overflow: hidden;
}
.img-bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* 60%没有通明度的白色 */
z-index: 1; /* 确保受层正在后台之上 */
}
}需要：念要给一个展现图片的地域底部添一个该图片的缩小后的靠山，并迷糊 两0，并增多一个利剑色 0.6 通明度的遮罩
然则依照下面代码完成后，周边有一圈黑色光晕，如图：
操持圆案：
应用backdrop-filter: blur(两0px);
然则注重，backdrop-filter 不克不及直截添正在后台图自身样式上，会招致没有收效。
backdrop-filter属性必要正在存在定位的元艳上利用，歧position: relative或者position: absolute；backdrop-filter运用于的元艳必要有一个配景元艳正在厥后，凡是是该元艳的女级元艳。如何不如许的配景元艳，backdrop-filter将没有会收效。确保女级元艳有否睹的布景形式。
以是咱们将backdrop-filter 搁正在 img-bg::before 面，便可收效：
.img-bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* 60%没有通明度的利剑色 */
z-index: 1; /* 确保受层正在靠山之上 */
backdrop-filter: blur(二0px); /* 加添两0暗昧结果 */
}
如许便利剑色光晕的结果了。
到此那篇闭于CSS假如配置布景迷糊周边有利剑色光晕的文章便先容到那了,更多相闭css靠山暧昧形式请搜刮剧本之野之前的文章或者连续涉猎上面的相闭文章，心愿大师之后多多撑持剧本之野！
发表评论 取消回复