CSS3模糊層效果怎么實現(xiàn)

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

　　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)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！