css怎么虚化背景图片？css虚化背景图片的方法介绍(C++之设置背景图片)
生活随笔
收集整理的這篇文章主要介紹了
css怎么虚化背景图片？css虚化背景图片的方法介绍(C++之设置背景图片)
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
在看到背景圖片虛化的時候，我相信很多朋友都會想到去用ps去實現(xiàn)這個效果，那么用css能實現(xiàn)背景圖片的虛化效果嗎？接下來的這篇文章就來給大家介紹一下css設(shè)置背景圖片虛化的方法。
在虛化背景時使用的是filter屬性，我們就是利用filter屬性中blur來設(shè)置虛化背景的。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<style>
img {
filter: blur(5px);
}
</style>
</head>
<body>
<img src="image/girl.jpg" alt="girl" width="300" height="300">
</body>
</html>
登錄后復制
css虛化背景的效果如下：
上述這個方法只是簡單的利用css將背景圖片虛化，下面我們來看看稍微復雜一點的方法，當然也是利用filter屬性
代碼如下：
<!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>圖片上面的文字內(nèi)容</p>
</div>
</div>
</body>
</html>
登錄后復制
背景圖片虛化效果如下：
說明：上述代碼主要就是將要設(shè)置虛化背景的地方通過偽元素設(shè)置背景顏色或圖片，利用區(qū)域relative定位和偽元素absolute定位這樣才能讓偽元素的大小完全等于本來區(qū)域的大小，然后用blur濾鏡進行虛化處理，就會想上面的效果那樣。
本篇文章到這里就全部結(jié)束了，更多精彩的內(nèi)容大家可以關(guān)注風君子博客的相關(guān)教程欄目！！！
以上就是css怎么虛化背景圖片？css虛化背景圖片的方法介紹的詳細內(nèi)容，更多請關(guān)注風君子博客其它相關(guān)文章！
總結(jié)
以上是生活随笔為你收集整理的css怎么虚化背景图片？css虚化背景图片的方法介绍(C++之设置背景图片)的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 东方甄选回应“小作文风波”：近期舆论爆发
- 下一篇： 机械师公布新款曙光 16 Air 笔记本