本篇教程介紹了HTML+CSS入門 如何實現背景圖片虛化效果，希望閱讀本篇文章以后大家有所收獲，幫助大家HTML+CSS入門。

<

需求：一個div設置了background:?url，現在需要使圖片背景模糊，div內的文字清晰顯示。

原始代碼：

html>

.content?{

color:?#ffffff;

font-size:?40px;

}

.bg?{

background:?url(‘1.jpg‘);

background-repeat:?no-repeat;

background-position:?center;

background-size:?cover;

height:600px;

text-align:?center;

line-height:?600px;

}

我是內容

原始效果：

解決方法：內容和圖片分別置于一個div，通過css設置背景div模糊度，設置內容div絕對位置。

html代碼：

html>

.content?{

color:?#ffffff;

font-size:?40px;

}

.bg?{

background:?url(‘1.jpg‘);

height:600px;

text-align:?center;

line-height:?600px;

}

.bg-blur?{

float:?left;

width:?100%;

background-repeat:?no-repeat;

background-position:?center;

background-size:?cover;

-webkit-filter:?blur(15px);

-moz-filter:?blur(15px);

-o-filter:?blur(15px);

-ms-filter:?blur(15px);

filter:?blur(15px);

}

.content-front?{

position:absolute;

left:?10px;

right:?10px;

height:600px;

line-height:?600px;

text-align:?center;

}

我是內容

總結

以上是生活随笔為你收集整理的css实现图片虚化_HTML+CSS入门 如何实现背景图片虚化效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。