站長資訊網想讓你的網頁頁面顯得高級感十足嗎？想要提高你網頁的閱讀訪問量嗎？想讓你的用戶一眼就被你的頁面吸引住嗎？那么就不要錯過本文啦！畢竟簡單又快速的實現(xiàn)高級感模糊的背景圖，誰都可以學會！
廢話不多說，開始正文！
正如標題所言我們今天所要介紹的就是通過css來創(chuà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)實</h1> <p>一切都是虛擬的，但感覺還是真實</p> </div> </body> </html>
效果如下圖所示：
（背景圖來源于網絡，侵刪歉）
怎么樣！效果是不是很棒！
那么在上述代碼中，給大家介紹幾個關鍵的css屬性：
filter 屬性定義了元素(通常是<img>)的可視效果(例如：模糊與飽和度)。
注： 舊版 Internet Explorer 瀏覽器(4.0 to 8.0) 支持的非標準 "filter" 屬性已被廢棄。 IE8 及更低版本瀏覽器通常使用 opacity 屬性。
transform屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
border簡寫屬性在一個聲明設置所有的邊框屬性。
border-width：規(guī)定邊框的寬度。 border-style：規(guī)定邊框的樣式。 border-color：規(guī)定邊框的顏色。 inherit：規(guī)定應該從父元素繼承 border 屬性的設置。
background簡寫屬性在一個聲明中設置所有的背景屬性。
background-color：規(guī)定要使用的背景顏色。 background-position：規(guī)定背景圖像的位置。 background-size：規(guī)定背景圖片的尺寸。 background-repeat：規(guī)定如何重復背景圖像。 background-origin：規(guī)定背景圖片的定位區(qū)域。 background-clip：規(guī)定背景的繪制區(qū)域。 background-attachment：規(guī)定背景圖像是否固定或者隨著頁面的其余部分滾動。 background-image：規(guī)定要使用的背景圖像。 inherit：規(guī)定應該從父元素繼承 background 屬性的設置。
PHP中文網平臺有非常多的視頻教學資源，歡迎大家學習《css視頻教程》！
