站長資訊網(wǎng)想讓你的網(wǎng)頁頁面顯得高級感十足嗎？想要提高你網(wǎng)頁的閱讀訪問量嗎？想讓你的用戶一眼就被你的頁面吸引住嗎？那么就不要錯(cuò)過本文啦！畢竟簡單又快速的實(shí)現(xiàn)高級感模糊的背景圖，誰都可以學(xué)會(huì)！
廢話不多說，開始正文！
正如標(biāo)題所言我們今天所要介紹的就是通過css來創(chuàng)建一個(gè)模糊的背景圖像，適用于你個(gè)人博客頁面，也適用于網(wǎng)站背景。
下面我直接上代碼：
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title></title> <style> body, html { height: 100%; margin: 0; font-family: Arial, Helvetica, sans-serif; } * { box-sizing: border-box; } .bg-image { /* 所使用的圖像 */ background-image: url("001.jpg"); /* 添加模糊效果 */ filter: blur(8px); -webkit-filter: blur(8px); /* 完整的高度 */ height: 100%; /* 中心和縮放圖像*/ background-position: center; background-repeat: no-repeat; background-size: cover; } /* 將文本放置在頁面/圖像的中間 */ .bg-text { background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.4); color: white; font-weight: bold; border: 3px solid #f1f1f1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 80%; padding: 20px; text-align: center; } </style> </head> <body> <div class="bg-image"></div> <div class="bg-text"> <h2>歡迎來到</h2> <h1 style="font-size:50px">虛擬現(xiàn)實(shí)</h1> <p>一切都是虛擬的，但感覺還是真實(shí)</p> </div> </body> </html>
效果如下圖所示：
（背景圖來源于網(wǎng)絡(luò)，侵刪歉）
怎么樣！效果是不是很棒！
那么在上述代碼中，給大家介紹幾個(gè)關(guān)鍵的css屬性：
filter 屬性定義了元素(通常是<img>)的可視效果(例如：模糊與飽和度)。
注： 舊版 Internet Explorer 瀏覽器(4.0 to 8.0) 支持的非標(biāo)準(zhǔn) "filter" 屬性已被廢棄。 IE8 及更低版本瀏覽器通常使用 opacity 屬性。
transform屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。該屬性允許我們對元素進(jìn)行旋轉(zhuǎn)、縮放、移動(dòng)或傾斜。
border簡寫屬性在一個(gè)聲明設(shè)置所有的邊框?qū)傩浴?/p>
border-width：規(guī)定邊框的寬度。 border-style：規(guī)定邊框的樣式。 border-color：規(guī)定邊框的顏色。 inherit：規(guī)定應(yīng)該從父元素繼承 border 屬性的設(shè)置。
background簡寫屬性在一個(gè)聲明中設(shè)置所有的背景屬性。
background-color：規(guī)定要使用的背景顏色。 background-position：規(guī)定背景圖像的位置。 background-size：規(guī)定背景圖片的尺寸。 background-repeat：規(guī)定如何重復(fù)背景圖像。 background-origin：規(guī)定背景圖片的定位區(qū)域。 background-clip：規(guī)定背景的繪制區(qū)域。 background-attachment：規(guī)定背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)。 background-image：規(guī)定要使用的背景圖像。 inherit：規(guī)定應(yīng)該從父元素繼承 background 屬性的設(shè)置。
PHP中文網(wǎng)平臺有非常多的視頻教學(xué)資源，歡迎大家學(xué)習(xí)《css視頻教程》！
