小編給大家分享一下css中如何虛化背景圖片,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)公司從2013年成立,先為平輿等服務建站,平輿等地企業(yè),進行企業(yè)商務咨詢服務。為平輿企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務解決您的所有建站問題。
代碼如下:
.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);*/
}
.textp{
height:inherit;
width:inherit;
display:table-cell;
vertical-align:middle;
position:relative;
}
圖片上面的文字內(nèi)容
以上是“css中如何虛化背景圖片”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學習更多知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!