最近都快忘了我的网站了.

 

　　今天终于有时间了,就来分享一下CSS3模糊效果,知道的朋友请低调——不知道的请努力学习，全程代码简短。

 

　　效果如上图，整个效果其实是两张图片，第一张作为背景图片，第二章作为模糊图片

 

　　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版本貌似会意外出现很多横条