上面的图片就是css3新特性的滤镜效果，学会了这些那么我们这群爱美爱帅的大web是不是就可以完美的用代码实现照片美化了捏~~
好，咱们先把照片后面的白框实现，
XM L/HT ML Code 复制内容到剪贴板
< style > &nbs p; # div1{ /*给div定义 宽 高和颜色*/ width: 200px; h ei ght: 250px; background: wh IT e; /* 内填充 距离 照片为15px ， 文字居中 */ padding: 15px; text-align: center ; /* 把 白色 背景旋转-10 deg */ - webkit -t ransform: rotate(-10deg); /*给背景一个阴影的效果*/ box -s hadow: 4px 4px 4px #666; float: left; } </ style > < br > < body > < BR > < div id = "div1" > < img src = "img/001V28Mwty6Fww02IiNad& am p;690. jpg " > < p > 灰色滤镜 </ p > </ div > < BR > </ body >
把白色的背景框写好之后，接下来就该到滤镜了
首先来 第一张 ，艺 术 的黑白色
XML/HTML Code 复制内容到剪贴板
#div1 img{ /*把div1里面的图片百分百，等同于相对于在div1里面百分比放大填充*/ width: 100%; /*把图片变成黑白色括号里跟颜色变化的值，只能取0~1之间*/ -webkit-filter: grayscale(1); }
第二张照片，额 .. .老照片.
XML/HTML Code 复制内容到剪贴板
#div1 img{ width: 100%; -webkit-filter: sepia(1); }
第三张照片，反色？我也不太清楚啥颜色
XML/HTML Code 复制内容到剪贴板
#div1 img{ width: 100%; -webkit-filter: hue-rotate(200deg); }
第四张照片，仿佛罩了一层白雾
XML/HTML Code 复制内容到剪贴板
#div1 img{ width: 100%; -webkit-filter: opacity(0.5); }
还有一张照片的效果图上没有，是模糊效果代码如下
XML/HTML Code 复制内容到剪贴板
#div4 img{ width: 100%; -webkit-filter: opacity(0.5); }
好了，我的滤镜分享完毕，接下来美图去了
以上这篇css3的过滤效果 简单 实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
总结
以上是 为你收集整理的 css3的过滤效果简单实例 全部内容，希望文章能够帮你解决 css3的过滤效果简单实例 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。