第用CSS快速創(chuàng)建高級模糊感的背景圖像廢話不多說，開始正文！

正如標題所言我們今天所要介紹的就是通過CSS來創(chuàng)建一個模糊的背景圖像，適用于你個人博客頁面，也適用于網(wǎng)站背景。

下面我直接上代碼：

!DOCTYPEhtml

html

head

metacharset=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:3pxsolid#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>

效果如下圖所示：

（背景圖來源于網(wǎng)絡，侵刪歉）

怎么樣！效果是不是很棒！

那么在上述代碼中，給大家介紹幾個關鍵的css屬性：

filter屬性定義了元素(通常是img)的可視效果(例如：模糊與飽和度)。

注：舊版InternetExplorer瀏覽器(4.0to8.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ī)定背景圖