CSS虛化效果可以讓網頁中的背景圖像模糊化,強化內容的可讀性,增加美感。使用CSS虛化背景圖像的方法很簡單,在CSS文件中添加以下代碼:
.blur { position: relative; width: 100%; height: 100%; background: url('your-image.jpg') no-repeat; background-size: cover; -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); z-index: -1; }
上面代碼中的.blur是指類名,可以根據自己的需求進行修改。其中,設置position屬性為relative,為了讓虛化的圖像相對于文本內容進行定位。background屬性用于指定背景圖像,在代碼中需要修改成自己的圖像文件名。background-size屬性設置為cover,讓背景圖像始終填滿整個容器。最重要的是,使用filter屬性來實現虛化效果,目前大部分瀏覽器都支持該屬性。
最后,將虛化的圖像放到文本內容下面,使其處于z-index為-1的位置,并設置寬和高為100%。這樣就可以實現虛化背景圖像的效果了。不同的虛化程度可以通過調整blur的值來實現。
上一篇css首行縮進怎么搞
下一篇css虛擬機