CSS3實(shí)現(xiàn)模糊背景的三種效果示例

第CSS3實(shí)現(xiàn)模糊背景的三種效果示例普通背景模糊效果如下：

使用屬性：

filter:(2px)

普通背景模糊

為了美觀不能使背景前的文字模糊，而filter屬性會(huì)使這整個(gè)div的后代并且還會(huì)出現(xiàn)白邊。也就是說(shuō)無(wú)法達(dá)到這個(gè)效果。怎么辦呢？我們可以使用偽元素，這樣我們也順便解決了白邊的問(wèn)題。

實(shí)現(xiàn)思路：

在父容器中設(shè)置背景，并且使用相對(duì)定位，方便偽元素重疊。而在:after中只需要繼承背景，并且設(shè)置模糊，絕對(duì)定位覆蓋父元素即可。這樣父容器中的子元素便可不受模糊度影響。因?yàn)閭卧氐哪：炔荒鼙桓冈氐淖哟^承。

說(shuō)了這么多，來(lái)點(diǎn)代碼提提神。

簡(jiǎn)單的html布局：

div>

css：

/*背景模糊*/

width:100%;

height:100%;

position:relative;

background:url(../image/banner/banner.jpg)no-repeatfixed;

padding:1px;

box-sizing:border-box;

z-index:1;

.bg:after{

content:

width:100%;

height:100%;

position:absolute;

left:0;

top:0;

background:inherit;

filter:blur(2px);

z-index:2;

.drag{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

width:200px;

height:200px;

text-align:center;

z-index:11;

當(dāng)然，看了上面的代碼就能發(fā)現(xiàn)父容器下面的子代元素也是要使用絕對(duì)定位的，但是這個(gè)不會(huì)影響到后面的布局的，所以請(qǐng)放心使用（有問(wèn)題可以找博主麻煩~）。要注意的地方是要使用z-index確定層級(jí)關(guān)系，必須確保子代元素（也就是這里的drag）是在最上層的。不然子代元素的文字是不會(huì)出現(xiàn)的。

上面的代碼還有一個(gè)保證div居中的方法，細(xì)心的同學(xué)應(yīng)該已經(jīng)注意到了吧！不使用flex布局的情況下這樣居中應(yīng)該是比較簡(jiǎn)單的方法了。

那么這樣寫代碼表現(xiàn)出來(lái)的效果是怎么樣的呢？

背景局部模糊

相比較上一個(gè)效果而言，背景局部模糊就比較簡(jiǎn)單了。這時(shí)父元素根本就不用設(shè)置偽元素為模糊了。直接類比上面的代碼把子元素模糊掉，但是子元素的后代可能不能模糊了（這點(diǎn)要注意，解決辦法就是上一個(gè)效果的描述那樣）。

HTML布局稍微變了一下：

div>

css代碼如下：（大家注意對(duì)比）

/*背景局部模糊*/

width:100%;

height:100%;

background:url(../image/banner/banner.jpg)no-repeatfixed;

padding:1px;

box-sizing:border-box;

z-index:1;

.drag{

margin:100pxauto;

width:200px;

height:200px;

background:inherit;

position:relative;

.dragdiv{

width:100%;

height:100%;

text-align:center;

line-height:200px;

position:absolute;

left:0;

top:0;

z-index:11;

.drag:after{

content:

width:100%;

height:100%;

position:absolute;

left:0;

top:0;

background:inherit;

filter:blur(15px);/*為了模糊更明顯，調(diào)高模糊度*/

z-index:2;

效果如下：

背景局部清晰

背景局部清晰這個(gè)效果說(shuō)簡(jiǎn)單也不簡(jiǎn)單，說(shuō)難也不難。關(guān)鍵還是要應(yīng)用好background:inherit屬性。這里可不能使用transform讓它垂直居中了，大家還是選擇flex布局吧。如果這里再使用transform屬性的話會(huì)讓背景也偏移的。這樣就沒(méi)有局部清晰的效果了。

html布局不變，

注意看css的變化：

/*背景局部清晰*/

width:100%;

height:100%;

position:relative;

background:url(../image/banner/banner.jpg)no-repeatfixed;

padding:1px;

box-sizing:border-box;

.bg:after{

content:

width:100%;

height:100%;

position:absolute;

left:0;

top:0;

background:inherit;

filter:blur(3px);

z-index:1;

.drag{

position:absolute;

left:40%;

top:30%;

/*transform:translate(-50%,-50%);*/

width:200px;