CSS如何設置背景模糊周邊有白色光暈(解決方案)
發(fā)布時間：2024-03-20 16:11:17 作者：蓓蕾心晴 
我要評論
我要評論想要給一個展示圖片的區(qū)域底部加一個該圖片的放大后的背景，并模糊 20，并增加一個黑色 0.6 透明度的遮罩，這篇文章主要介紹了CSS如何設置背景模糊周邊有白色光暈(解決方案),需要的朋友可以參考下
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: 212px;
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: 200%; /* 放大兩倍 */
background-position: center;
background-repeat: no-repeat;
filter: blur(20px); /* 添加20模糊效果 */
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; /* 確保蒙層在背景之上 */
}
}需求：想要給一個展示圖片的區(qū)域底部加一個該圖片的放大后的背景，并模糊 20，并增加一個黑色 0.6 透明度的遮罩
但是按照上面代碼實現(xiàn)后，周邊有一圈白色光暈，如圖：
解決方案：
使用backdrop-filter: blur(20px);
但是注意，backdrop-filter 不能直接加在背景圖本身樣式上，會導致不生效。
backdrop-filter屬性需要在具有定位的元素上使用，例如position: relative或position: absolute；backdrop-filter應用于的元素需要有一個背景元素在其后，通常是該元素的父級元素。如果沒有這樣的背景元素，backdrop-filter將不會生效。確保父級元素有可見的背景內(nèi)容。
所以我們將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(20px); /* 添加20模糊效果 */
}
這樣就白色光暈的效果了。
到此這篇關(guān)于CSS如何設置背景模糊周邊有白色光暈的文章就介紹到這了,更多相關(guān)css背景模糊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 這篇文章主要介紹了CSS設置背景模糊的實現(xiàn)方法,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-10-22