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

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

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