CSS3知识之filter滤镜效果
效果图：
HTML代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3知识之filter滤镜效果</title> <style> *{ margin: 0; padding: 0; } body{ background-color: #333; padding: 30px; margin-right: -30px } div{ border-radius: 10px; width: 300px; height: 200px; position: relative; overflow: hidden; float: left; margin-right: 30px; margin-bottom: 30px; padding: 20px; } .imgBlur p{ line-height: 30px; color: #fff; font-size: 18px; } .imgBlur:after{ background: url('images/6.jpg') left center no-repeat; background-size: cover; content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: -1; margin: -10px; } .div02:after{ filter: blur(10px); } .div03:after{ filter: grayscale(1); } .div04:after{ filter: sepia(1); } .div05:after{ filter: saturate(.6); } .div06:after{ filter: hue-rotate(90deg); } .div07:after{ filter: invert(1); } .div08:after{ filter: opacity(.5); } .div09:after{ filter: brightness(1.5); } .div10:after{ filter: contrast(2); } .div11{ filter: drop-shadow(5px 5px 5px #f00); } .div12{ filter:saturate(5) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(1.5) brightness(.9);} </style> </head> <body> <div class="imgBlur div01"> <p>图片原始效果...</p> </div> <div class="imgBlur div02"> <p>图片磨砂玻璃滤镜...</p> <p>filter: blur(10px)</p> <p>默认值：0</p> </div> <div class="imgBlur div03"> <p>图片灰度滤镜...</p> <p>filter: grayscale(1)</p> <p>默认值：100%</p> </div> <div class="imgBlur div04"> <p>图片颜料滤镜...</p> <p>filter: sepia(1)</p> <p>默认值：100%</p> </div> <div class="imgBlur div05"> <p>图片饱和度滤镜...</p> <p>filter: saturate(.6)</p> <p>默认值：100%</p> </div> <div class="imgBlur div06"> <p>图片色相旋转滤镜...</p> <p>filter: hue-rotate(90deg)</p> <p>默认值：0deg </p> </div> <div class="imgBlur div07"> <p>图片反色滤镜...</p> <p>filter: invert(1)</p> <p>默认值：100％ </p> </div> <div class="imgBlur div08"> <p>图片透明度滤镜...</p> <p>filter: opacity(.5)</p> <p>默认值：100% </p> </div> <div class="imgBlur div09"> <p>图片亮度滤镜...</p> <p>filter: brightness(1.5)</p> <p>默认值：100％ </p> </div> <div class="imgBlur div10"> <p>图片对比度滤镜...</p> <p>filter: contrast(2)</p> <p>默认值：100％ </p> </div> <div class="imgBlur div11"> <p>图片阴影滤镜...</p> <p>filter: drop-shadow(5px 5px 5px red)</p> <p>默认值：无 </p> </div> <div class="imgBlur div12"> <p>图片综合滤镜...</p> <p>filter:saturate(5) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(1.5) brightness(.9);</p> </div> </body> </html>
参考资料：http://www.w3cdream.com/content-sort-5-article-494.html
