CSS設定背景模糊的實現方法

2022-05-30 13:48:12 字數 877 閱讀 4262

這篇文章主要介紹了css設定背景模糊的實現方法,**簡單易懂,非常不錯,具有一定的參考借鑑價值,需要的朋友可以參考下

在做一些頁面的時候,為了讓頁面更好看,我們常常需要設定一些背景,但是,當背景太過花哨的時候,又會影響我們的主體內容,所以我們就需要用到 filter 屬性來設定他的模糊值。

html**如下12

3456

78910

1112

13

我是需要突出顯示的內容

但是如果直接在背景上使用的話,12

3456

78910

11.cover

可能會造成下面的這種情況。

我們會發現背景和主體內容都變糊了。12

16 css實現模糊背景

使用屬性 filter 2px 普通背景模糊 為了美觀不能使背景前的文字模糊,而filter屬性會使這整個div的後代並且還會出現白邊。也就是說無法達到這個效果。怎麼辦呢?我們可以使用偽元素,這樣我們也順便解決了白邊的問題。實現思路 在父容器中設定背景,並且使用相對定位,方便偽元素重疊。而在 aft...

16 css實現模糊背景

使用屬性 filter 2px 普通背景模糊 為了美觀不能使背景前的文字模糊,而filter屬性會使這整個div的後代並且還會出現白邊。也就是說無法達到這個效果。怎麼辦呢?我們可以使用偽元素,這樣我們也順便解決了白邊的問題。實現思路 在父容器中設定背景,並且使用相對定位,方便偽元素重疊。而在 aft...

css背景設定

顏色表示方法 background 1 red 英文單詞 2 ff0000 16進製制 3 rgb 255,0,0 3元色 4 rgb 100 0 0 百分比 背景起始位置 background origin padding box border box content box 邊框起始 內邊距起始...