一、filter

這種方式有白邊，需要把盒子設置大一點，把白邊隱藏。

<div class="bg-box"><div class="bg"></div> <div> <style> .bg-box{width:100%;heigth:100%;position:relative;overflow:hidden; } .bg{position:absolute;top: -2.5%;left: -2.5%;z-index: -2;height: 105%;width: 105%;filter: blur(5px); } </style>

二、backdrop-filter

適用于元素背后的所有元素，為了看到效果，必須使元素或其背景至少部分透明。

在需要模糊的盒子上添加一層遮罩的盒子

<div class="box">需要模糊的內容 <div> <div class="filter"></div> <style> .filter{position:absolute;top: 0;left: 0;height: 100%;width: 100%;backdrop-filter: blur(2px); } </style>

詳細可看

filter - CSS（層疊樣式表） | MDN

backdrop-filter - CSS（層疊樣式表） | MDN

總結

以上是生活随笔為你收集整理的css实现模糊的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。