本篇內(nèi)容介紹了“CSS3模糊層效果怎么實現(xiàn)”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)網(wǎng)站建設提供從項目策劃、軟件開發(fā)，軟件安全維護、網(wǎng)站優(yōu)化(SEO)、網(wǎng)站分析、效果評估等整套的建站服務，主營業(yè)務為成都網(wǎng)站設計、網(wǎng)站制作，app軟件定制開發(fā)以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。創(chuàng)新互聯(lián)深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

HTML：

CSS3:

div{

background:url("image.jpg") no-repeat;

width:200px;

height:180px;

margin:50px auto 0;

position:relative;

}

.content{

position: absolute;

left: 0;

right: 0;

bottom: 0;

width: 100%;

height: 30px;

overflow: hidden;

}

.blur{

position: absolute;

width: 100%; bottom: 0; left: 0;

-webkit-transform: translateZ(0);

transform: translateZ(0);

filter: url(blur-5px.svg#blur);

-webkit-filter: blur(5px);

-moz-filter: blur(5px);

filter: blur(5px);

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=5, MakeShadow=false);

}

.meta{

position: absolute;

left: 0;

bottom: 0;

width: 100%;

color:#fff;

background-color: rgba(0,0,0,.2);

font-size:12px;

line-height:30px;

}

注意:

效果代碼如上,完美支持FF與chrome瀏覽器,對于IE與edge瀏覽器貌似并沒有什么卵用還有360瀏覽器7.0版本貌似會意外出現(xiàn)很多橫條

“CSS3模糊層效果怎么實現(xiàn)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

本文題目：CSS3模糊層效果怎么實現(xiàn)
本文路徑：http://www.chinadenli.net/article34/gghcse.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、響應式網(wǎng)站、電子商務、云服務器、網(wǎng)站營銷、品牌網(wǎng)站設計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)