CSS3 -webkit-filter 滤镜效果
2016-03-30 14:55
841 查看
from: http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201301053419890/
-webkit-filter,其存在的作用通常是进行图片的处理
原图样式:
网页代码:
上面表示灰度100%效果图:
还可以添加的命令有:
-webkit-filter,其存在的作用通常是进行图片的处理
原图样式:
网页代码:
<!doctype html> <html> <head> <meta charset='utf-8' /> <title>-webkit-filter</title> <style type="text/css"> img{-webkit-filter:grayscale(1);} </style> </head> <body> <img src="3.jpg" alt="" /> </body> </html>
上面表示灰度100%效果图:
还可以添加的命令有:
-webkit-filter:blur(5px); //模糊,此处为5像素 -webkit-filter:sepia(0.5); //叠加褐色,取值范围0-1,此处表示50%的褐色 -webkit-filter:brightness(0.5); //亮度,取值范围0-1,5倍亮度(数字为0时为正常样式,为1时表示的是100%亮度,无法看到图片) -webkit-filter:hue-rotate(30deg); //色相(按照色相环进行旋转,顺时针方向,红-橙-黄-黄绿-绿-蓝绿-蓝-蓝紫-紫-紫红-红)此处为叠加黄色滤镜 -webkit-filter:invert(1); //反色,取值范围0-1,0为原图,1为彻底反色之后,0.5为灰色 -webkit-filter:saturate(4); //饱和度,取值范围0~*,0为无饱和度,1为原图,值越高饱和度越大 -webkit-filter:contrast(2); //对比度,取值范围0~*,0为无对比度(灰色),1为原图,值越高对比度越大 -webkit-filter:opacity(0.8); //透明度,取值范围0~1,0为全透明,1为原图 -webkit-filter:drop-shadow(17px 17px 20px black); //阴影
相关文章推荐
- js中用cssText设置css样式
- Html+CSS input type=file 文件标签的美化
- css隐藏文字的小技巧
- css 样式
- css 样式
- css 样式
- CSS深入理解之relative
- 1.样式表的一些bug, 2.如何通过键盘事件插入spinbox,3.不改变系统编码的前提下,单独转换某一字体编码,4.多色彩颜色失败
- 【表格样式】——HTML制作表格大全
- CSS-border.
- HTML的各个标签的默认样式有哪些
- css 居中
- alert 换行
- css中如何修改鼠标光标(指针)的样式和颜色
- CSS box-flex属性,然后弹性盒子模型简介
- css笔记——inline-block以及空白字符处理
- 浏览器加载跟渲染html的顺序-css渲染效率的探究
- CSS hack
- CSS制作箭头图标代码(圆,三角形,椭圆)
- 利用css实现两列等高的方法