16 css實現模糊背景

使用屬性：

filter:(2px)

普通背景模糊

為了美觀不能使背景前的文字模糊，而filter屬性會使這整個div的後代並且還會出現白邊。也就是說無法達到這個效果。怎麼辦呢？我們可以使用偽元素，這樣我們也順便解決了白邊的問題。

實現思路：

在父容器中設定背景，並且使用相對定位，方便偽元素重疊。而在:after中只需要繼承背景，並且設定模糊，絕對定位覆蓋父元素即可。這樣父容器中的子元素便可不受模糊度影響。因為偽元素的模糊度不能被父元素的子代繼承。

說了這麼多，來點**提提神。

簡單的html布局：

like windowdiv> div>

css：

/*背景模糊*/ .bg .bg:after .drag

當然，看了上面的**就能發現父容器下面的子代元素也是要使用絕對定位的，但是這個不會影響到後面的布局的，所以請放心使用（有問題可以找博主麻煩~）。要注意的地方是要使用z-index確定層級關係，必須確保子代元素（也就是這裡的drag）是在最上層的。不然子代元素的文字是不會出現的。

上面的**還有乙個保證div居中的方法，細心的同學應該已經注意到了吧！不使用flex布局的情況下這樣居中應該是比較簡單的方法了。

那麼這樣寫**表現出來的效果是怎麼樣的呢？

背景區域性模糊

相比較上乙個效果而言，背景區域性模糊就比較簡單了。這時父元素根本就不用設定偽元素為模糊了。直接模擬上面的**把子元素模糊掉，但是子元素的後代可能不能模糊了（這點要注意，解決辦法就是上乙個效果的描述那樣）。

html布局稍微變了一下：

like windowdiv> div> div>

/*背景區域性模糊*/ .bg .drag .drag >div .drag:after

效果如下：

背景區域性清晰

背景區域性清晰這個效果說簡單也不簡單，說難也不難。關鍵還是要應用好background:inherit屬性。這裡可不能使用transform讓它垂直居中了，大家還是選擇flex布局吧。如果這裡再使用transform屬性的話會讓背景也偏移的。這樣就沒有區域性清晰的效果了。

html布局不變，

注意看css的變化：

/*背景區域性清晰*/ .bg .bg:after .drag

效果展示：