CSS3属性之——filter
来源:互联网 发布:淘宝 李维斯羊羔绒 编辑:程序博客网 时间:2024/04/28 07:24
首先我们新建一个html文档,(我用的是sublime text 编码器)为了方便起见,我们采用在html文档中使用style标签直接嵌入CSS样式的方式。为了进行效果比较,我们插入两张一样的图片,大小设置为100px。第二章图片作为效果图使用,将其class设置为pic。效果如图显示
考虑到浏览器的兼容性,我们使用IE 9.0及以上版本或者使用Chrome18.0.97及以上版本。这里我使用的是IE9.0版本,接下来我们看插入效果图。
然后进入我们的效果编码效果展示部分:
一、grayscale特效,grayscale的作用是把图片变成黑白图。
在style中给.pic设置属性,写入这样一行代码:-webkit-filter:grayscale(1);(-webkit-作用是处理浏览器兼容性)效果如图所示
二、sepia特效,sepia的作用是把图片变成褐色,产生复古效果。
在style中给.pic设置属性,写入这样一行代码:-webkit-filter:sepia(1);效果如图所示
三、saturate特效,saturate的作用还是设置更改图片的饱和度,可根据自己对图片饱和度的要求任意设置。这里设置为5,
在style中给.pic设置属性,写入这样一行代码:--webkit-filter:saturate(5);
效果如图所示
四、hue-rotate特效,saturate的作用是改变色相,属性值为角度,默认值。0deg
在style中给.pic设置属性,写入这样一行代码:-webkit-filter:hue-rotate(90deg);效果如图所示
五、opacity特效,opacity的作用是设置改变图片的透明度,默认值100%。
在style中给.pic设置属性,写入这样一行代码:-webkit-filter:opacity(.1);效果如图所示
六、invert特效,invert的作用效果和相机底片一样,进行反色,默认值100%。
在style中给.pic设置属性,写入这样一行代码:-webkit-filter:invert(1);效果如图所示
七、brightness特效,brightne的作用是改变设置图片的亮度,默认值100%。
在style中给.pic设置属性,写入这样一行代码:-webkit-filter:brightness(.5);效果如图所示
八、contrast特效,contrast的作用是改变设置图片的对比度,默认值100%。
在style中给.pic设置属性,写入这样一行代码:-webkit-filter:contrast(2);效果如图所示
九、blur特效,blur的作用是改变图片的清晰度,默认值为0。
在style中给.pic设置属性,写入这样一行代码:-webkit-filter:blur(2px);效果如图所示
十、drop-shadow特效,drop-shadow的作用是产生阴影。
在style中给.pic设置属性,写入这样一行代码:-webkit-filter:drop-shadow(2px);效果如图所示
当然根据需要可以同时使用两种或几种特效达到最好的效果。
- CSS3属性之——filter
- Css3学习之filter(滤镜)属性详解
- css3 filter属性
- css3属性 -webkit-filter
- css3属性 -webkit-filter
- CSS3 filter(滤镜) 属性
- CSS3 filter属性
- css3之filter函数
- css3中强大的filter(滤镜)属性
- CSS3 选择器—属性选择器
- CSS3属性之Transitions
- CSS3属性之background
- CSS3的72变——CSS3变形属性transform
- CSS3基础(3)——CSS3 布局属性全接触
- CSS3 Filter
- css3 filter
- CSS3之border-color属性
- CSS3之border-image属性
- PX4学习笔记之uorb
- ACM--DFS--最大碉堡数--HDOJ 1045--Fire Net
- Pentest Tips and Tricks
- 字符串函数
- 【Linux】linux常用基本命令 http://blog.csdn.net/xiaoguaihai/article/details/8705992/
- CSS3属性之——filter
- mysql 密码过期问题 password_expired
- 64位 Linux 编译32位应用程序
- Android自定义RadioGroup
- Java获取PostgreSQL数据库中文数据乱码问题
- 【深入浅出Node.js系列十一】Node.js开发框架Express4.x
- AutoLayout代码控制约束是否起作用
- JavaScript基础——引用类型(二)日期类型Date、正则表达式类型RegExp
- OpenGLES---模型/观察/投影矩阵