在看到背景圖片虛化的時候，我相信很多朋友都會想到去用ps去實現這個效果，那麼用css能實現背景圖片的虛化效果嗎？接下來的這篇文章就來跟大家介紹一下css設定背景圖片虛化的方法。
在虛化背景時使用的是filter屬性，我們就是利用filter屬性中blur來設定虛化背景的。
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<style>
img {
filter: blur(5px);
}
</style>
</head>
<body>
<img src="image/girl.jpg" alt="girl" width="300" style="max-width:90%">
</body>
</html>css虛化背景的效果如下：
<!DOCTYPE html>
<html>
<head>
<style>
.mbl {
width: 20em;
height: 20em;
background: url(image/girl.jpg);
background-size: cover;
overflow: hidden;
margin: 30px;
}
.text {
width: 18em;
height: 18em;
margin: 1em;
background: hsla(0, 0%, 100%, .4);
color: black;
text-align: center;
overflow: hidden;
position: relative;
}
.text::before {
position: absolute;
background: url(image/girl.jpg);
background-size: cover;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: '';
filter: blur(4px);
/* background: rgba(225, 0, 0, 0.5);*/
}
.text p {
height: inherit;
width: inherit;
display: table-cell;
vertical-align: middle;
position: relative;
}
</style>
</head>
<body>
<div class="mbl">
<div class="text">
<p>图片上面的文字内容</p>
</div>
</div>
</body>
</html>
以上是css怎麼虛化背景圖？ css虛化背景圖片的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
