css filter详解
2015-07-06 20:55
706 查看
css filter详解
filter 属性详解
属性 | 名称 | 类型 | 说明 |
grayscale | 灰度 | 值为数值 | 取值范围从0到1的小数(包括0和1) |
sepia | 褐色 | 值为数值 | 取值范围从0到1的小数(包括0和1) |
saturate | 饱和度 | 值为数值 | 默认是1,可以是小于1的小数,也可以大于1 |
hue-rotate | 色相旋转 | 值为角度 | 0-360deg |
invert | 反色 | 值为数值 | 取值范围从0到1的小数(包括0和1) /*IE10*/ |
opacity | 透明度 | 值为数值 | 取值范围从0到1的小数(包括0和1) |
brightness | 亮度 | 值为数值 | 默认是1,可以小于1(变暗),可以大于1(变亮) |
contrast | 对比度 | 值为数字 | 默认是1,可以大于1,也可以小于1 |
blur | 模糊 | 值为length | 表示模糊半径,比如filter:blur(2px)/*IE10*/ |
drop-shadow | 阴影 | 值为shadow() | 写法类似css3 box-shadow,比如filter:drop-shadow(0,0,10px,black) |
特别说明: 火狐、opera浏览器不支持filter属性 所以在写定义常用属性的时候如:半透明属性:opacity,则可以直接定义成opacity:.5;/*Opera9.0+、Firefox1.5+、Safari、Chrome*/ 另外ie6也有特定的png图片定义方式:background:url(../images/yz.png) center bottom no-repeat; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=”images/yz.png”);_background:none; IE透明定义方式filter:alpha(opacity=30); /*IE5、IE5.5、IE6、IE7*/ |
div .f_grayscale {
filter: grayscale(50%);
-webkit-filter: grayscale(50%);
-moz-filter: grayscale(50%);
-ms-filter: grayscale(50%);
-o-filter: grayscale(50%);
}
2.sepia
div .f_sepia {
filter:sepia(0.1);
-webkit-filter:sepia(0.1);
-moz-filter:sepia(0.9);
-ms-filter:sepia(0.9);
-o-filter:sepia(0.9);
}
3.saturate
div .f_saturate{
filter:saturate(125);
-webkit-filter:saturate(3);
-moz-filter:saturate(3);
-ms-filter:saturate(3);
-o-filter:saturate(3);
}
4.hue-rotate
div .f_hue-rotate{
filter:hue-rotate(300deg);
-webkit-filter:hue-rotate(300deg);
-moz-filter:hue-rotate(50deg);
-ms-filter:hue-rotate(50deg);
-o-filter:hue-rotate(50deg);
}
5.invert
div .f_invert{
filter:invert(.3);
-webkit-filter:invert(.3);
-moz-filter:invert(.3);
-ms-filter:invert(.3);
-o-filter:invert(.3);
}
6.opacity
div .f_opacity{
filter:opacity(.5);
-webkit-filter:opacity(.5);
-moz-filter:opacity(.5);
-ms-filter:opacity(.5);
-o-filter:opacity(.5);
}
7.brightness大于1的情况
div .f_brightness{
filter:brightness(5);
-webkit-filter:brightness(5);
-moz-filter:brightness(1.3);
-ms-filter:brightness(1.3);
-o-filter:brightness(1.3);
}
8.brightness小于1的情况
div .f_brightness{
filter:brightness(.3);
-webkit-filter:brightness(.3);
-moz-filter:brightness(.3);
-ms-filter:brightness(.3);
-o-filter:brightness(.3);
}
9.contrast大于1
div .f_contrast{
filter:contrast(2);
-webkit-filter:contrast(2);
-moz-filter:contrast(2);
-ms-filter:contrast(2);
-o-filter:contrast(2);
}
10.contrast小于1
div .f_contrast{
filter:contrast(.2);
-webkit-filter:contrast(.2);
-moz-filter:contrast(.2);
-ms-filter:contrast(.2);
-o-filter:contrast(.2);
}
11.blur
div .f_blur{
filter:blur(10px);
-webkit-filter:blur(10px);
-moz-filter:blur(2px);
-ms-filter:blur(2px);
-o-filter:blur(2px);
}
12.drop-shadow
div .f_shadow{
filter:drop-shadow(3px 3px 5px rgba(0,0,0,.5));
-webkit-filter:drop-shadow(10px 10px 5px rgba(0,0,0,.1));
-moz-filter:drop-shadow(3px 3px 5px rgba(0,0,0,.5));
-ms-filter:drop-shadow(3px 3px 5px rgba(0,0,0,.5));
-o-filter:drop-shadow(3px 3px 5px rgba(0,0,0,.5));
}
相关文章推荐
- HTML+CSS - 前端设计的小技巧(持续更新......)
- css笔记16:盒子模型的入门案例
- Chrome表单文本框自动填充黄色背景色样式
- css笔记15:盒子模型
- CSS透明度设置支持IE,Chrome,Firefox浏览器
- 聊聊css hack
- css笔记14:css文件之间可以相互引用
- css笔记13:display用法
- 使用CSS3制图
- css3学习总结9--CSS3过渡
- css学习笔记一
- css3学习总结8--CSS3 3D转换
- css3学习总结7--CSS3 2D转换
- css笔记12:块元素和行内元素
- css3学习总结6--CSS3字体
- css3学习总结5--CSS3文本效果
- css3学习总结4--CSS3背景
- css3学习总结3--CSS3图像边框
- CSS3 Transitions, Transforms和Animation使用简介与应用展示
- 【慕课网】php工程师学习计划之我的学习笔记——01 入门必学web基础 htmlcss基础课程 篇