css滤镜总结
2016-05-03 20:19
555 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3滤镜实现</title>
<style type="text/css">
.div_20160110 img {
max-width: 150px;
max-height: 150px;
}
.sepia { /** 格式，filer: sepia(效果范围)
对图片或元素整体进行棕褐色处理，会将你的图片复古成黑白老照片
* 效果范围，取值范围为0-1或0-100%；0表示无效果，1或100%表示最大效果
*/
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
filter: sepia(100%);
}
.grayscale { /** 格式，filer: grayscale(效果范围)
图片变黑白实例页面，也就是说你的图片将只有两种颜色——“黑色”和“白色”。
* 效果范围，取值范围为0-1或0-100%；0表示无效果，1或100%表示最大效果
*/
-webkit-filter: grayscale(100%);
-o-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
}
.blur { /** 格式，filer: blur(模糊半径)
* 模糊半径，取值范围0~Npx，0为无效果
*/
-webkit-filter: blur(2px);/*chrome浏览器支持*/
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);/*firefox浏览器支持*/
}
.invert { /** 格式，filer: invert(效果范围)
可以把对象的可视化属性全部翻转,包括色彩、饱和度和亮度值。，invert做出来的效果就像是我们照相机底面的效果一样
* 效果范围，取值范围0~1或0~100%，0为无效果，1或100%表示最大效果
*/
-webkit-filter: invert(1);
-moz-filter: invert(1);
-o-filter: invert(1);
-ms-filter: invert(1);
filter: invert(1);
}
.saturate { /** 格式，filer: saturate(效果范围)
饱和度对比
* 效果范围，取值范围>=0的数字或百分数，1为无效果，0为灰度图
*/
-webkit-filter: saturate(2);
-moz-filter: saturate(2);
-o-filter: saturate(2);
-ms-filter: saturate(2);
filter: saturate(2);
}
.contrast { /** 格式，filer: contrast(效果范围)
* 效果范围，
取值范围>=0的数字或百分数，1为无效果
*/
-webkit-filter: contrast(2);
-moz-filter: contrast(2);
-o-filter: contrast(2);
-ms-filter: contrast(2);
filter: contrast(2);
}
.brightness { /** 格式，filer: brightness(效果范围)
亮度对比
* 效果范围，取值范围>=0的数字或百分数，1为无效果
*/
-webkit-filter: brightness(2);
-moz-filter: brightness(2);
-o-filter: brightness(2);
-ms-filter: brightness(2);
filter: brightness(2);
}
.hue-rotate { /** 格式，filer: hue-rotate(效果范围)
改变图片的色相
* 效果范围，取值范0deg~365deg，0（默认值）为无效果
*/
-webkit-filter: hue-rotate(200deg);
-moz-filter: hue-rotate(200deg);
-o-filter: hue-rotate(200deg);
-ms-filter: hue-rotate(200deg);
filter: hue-rotate(200deg);
}
.drop-shadow { /** 格式，filer: drop-shadow(x-offset y-offset 阴影模糊半径 阴影颜色)
* x-offset和y-offset为阴影的相对于元素左上角的位移距离；
* 注意：
* 1. 阴影的外观受border-radius样式的影响；
* 2. :after和:before等伪元素会继承阴影的效果。
*/
-webkit-filter: drop-shadow(1px 1px 0px #333);
-moz-filter: drop-shadow(1px 1px 0px #333);
-o-filter: drop-shadow(1px 1px 0px #333);
-ms-filter: drop-shadow(1px 1px 0px #333);
filter: drop-shadow(1px 1px 0px #333); /*圆角*/
border: solid 2px #e00;
-webkit-border-radius: 1px;
}
</style>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width,user-scalable=no" name="viewport" />
<link href="/images/web_mini.ico" type="image/x-icon" rel="shortcut icon" />
<title>CSS3 滤镜实现</title>
<link href="css/20160110.css" rel="stylesheet" />
</head>
<body>
<div style="display: table; text-align: center; width: 100%; height: 100%;">
<div style="display: table-cell; vertical-align: middle;">
<div class="div_20160110">
<img src="img/11.jpg" class="" alt="原图" title="原图" />
<img src="img/11.jpg" class="sepia " alt="Speia滤镜" title="Speia滤镜" />
<img src="img/11.jpg" class="grayscale " alt="灰度图滤镜" title="灰度图滤镜" />
<img src="img/11.jpg" class="blur " alt="高斯模糊滤镜" title="高斯模糊滤镜" />
<img src="img/11.jpg" class="invert " alt="反色滤镜" title="反色滤镜" />
<img src="img/11.jpg" class="saturate " alt="饱和度滤镜" title="饱和度滤镜" />
<img src="img/11.jpg" class="contrast " alt="对比度滤镜" title="对比度滤镜" />
<img src="img/11.jpg" class="brightness " alt="亮度滤镜" title="亮度滤镜" />
<img src="img/11.jpg" class="hue-rotate " alt="色相旋转滤镜" title="色相旋转滤镜" />
<img src="img/11.jpg" class="drop-shadow " alt="阴影滤镜" title="阴影滤镜" />
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>css3滤镜实现</title>
<style type="text/css">
.div_20160110 img {
max-width: 150px;
max-height: 150px;
}
.sepia { /** 格式，filer: sepia(效果范围)
对图片或元素整体进行棕褐色处理，会将你的图片复古成黑白老照片
* 效果范围，取值范围为0-1或0-100%；0表示无效果，1或100%表示最大效果
*/
-webkit-filter: sepia(100%);
-moz-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
filter: sepia(100%);
}
.grayscale { /** 格式，filer: grayscale(效果范围)
图片变黑白实例页面，也就是说你的图片将只有两种颜色——“黑色”和“白色”。
* 效果范围，取值范围为0-1或0-100%；0表示无效果，1或100%表示最大效果
*/
-webkit-filter: grayscale(100%);
-o-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
}
.blur { /** 格式，filer: blur(模糊半径)
* 模糊半径，取值范围0~Npx，0为无效果
*/
-webkit-filter: blur(2px);/*chrome浏览器支持*/
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);/*firefox浏览器支持*/
}
.invert { /** 格式，filer: invert(效果范围)
可以把对象的可视化属性全部翻转,包括色彩、饱和度和亮度值。，invert做出来的效果就像是我们照相机底面的效果一样
* 效果范围，取值范围0~1或0~100%，0为无效果，1或100%表示最大效果
*/
-webkit-filter: invert(1);
-moz-filter: invert(1);
-o-filter: invert(1);
-ms-filter: invert(1);
filter: invert(1);
}
.saturate { /** 格式，filer: saturate(效果范围)
饱和度对比
* 效果范围，取值范围>=0的数字或百分数，1为无效果，0为灰度图
*/
-webkit-filter: saturate(2);
-moz-filter: saturate(2);
-o-filter: saturate(2);
-ms-filter: saturate(2);
filter: saturate(2);
}
.contrast { /** 格式，filer: contrast(效果范围)
* 效果范围，
取值范围>=0的数字或百分数，1为无效果
*/
-webkit-filter: contrast(2);
-moz-filter: contrast(2);
-o-filter: contrast(2);
-ms-filter: contrast(2);
filter: contrast(2);
}
.brightness { /** 格式，filer: brightness(效果范围)
亮度对比
* 效果范围，取值范围>=0的数字或百分数，1为无效果
*/
-webkit-filter: brightness(2);
-moz-filter: brightness(2);
-o-filter: brightness(2);
-ms-filter: brightness(2);
filter: brightness(2);
}
.hue-rotate { /** 格式，filer: hue-rotate(效果范围)
改变图片的色相
* 效果范围，取值范0deg~365deg，0（默认值）为无效果
*/
-webkit-filter: hue-rotate(200deg);
-moz-filter: hue-rotate(200deg);
-o-filter: hue-rotate(200deg);
-ms-filter: hue-rotate(200deg);
filter: hue-rotate(200deg);
}
.drop-shadow { /** 格式，filer: drop-shadow(x-offset y-offset 阴影模糊半径 阴影颜色)
* x-offset和y-offset为阴影的相对于元素左上角的位移距离；
* 注意：
* 1. 阴影的外观受border-radius样式的影响；
* 2. :after和:before等伪元素会继承阴影的效果。
*/
-webkit-filter: drop-shadow(1px 1px 0px #333);
-moz-filter: drop-shadow(1px 1px 0px #333);
-o-filter: drop-shadow(1px 1px 0px #333);
-ms-filter: drop-shadow(1px 1px 0px #333);
filter: drop-shadow(1px 1px 0px #333); /*圆角*/
border: solid 2px #e00;
-webkit-border-radius: 1px;
}
</style>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width,user-scalable=no" name="viewport" />
<link href="/images/web_mini.ico" type="image/x-icon" rel="shortcut icon" />
<title>CSS3 滤镜实现</title>
<link href="css/20160110.css" rel="stylesheet" />
</head>
<body>
<div style="display: table; text-align: center; width: 100%; height: 100%;">
<div style="display: table-cell; vertical-align: middle;">
<div class="div_20160110">
<img src="img/11.jpg" class="" alt="原图" title="原图" />
<img src="img/11.jpg" class="sepia " alt="Speia滤镜" title="Speia滤镜" />
<img src="img/11.jpg" class="grayscale " alt="灰度图滤镜" title="灰度图滤镜" />
<img src="img/11.jpg" class="blur " alt="高斯模糊滤镜" title="高斯模糊滤镜" />
<img src="img/11.jpg" class="invert " alt="反色滤镜" title="反色滤镜" />
<img src="img/11.jpg" class="saturate " alt="饱和度滤镜" title="饱和度滤镜" />
<img src="img/11.jpg" class="contrast " alt="对比度滤镜" title="对比度滤镜" />
<img src="img/11.jpg" class="brightness " alt="亮度滤镜" title="亮度滤镜" />
<img src="img/11.jpg" class="hue-rotate " alt="色相旋转滤镜" title="色相旋转滤镜" />
<img src="img/11.jpg" class="drop-shadow " alt="阴影滤镜" title="阴影滤镜" />
</div>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- qt样式表的使用
- CSS3之 3D变换、3D动画
- CSS3：媒体查询
- css行高line-height的一些深入理解及应用
- 对CSS3的理解
- css高度100%布局
- css 选择器，闲时看看，巩固基础
- CSS完全兼容IE6、IE7、IE8、IE9和firefox方法
- 如何使用CSS3/SCSS实现逼真的车窗雨滴效果
- css3 背景图动画一
- 固定fotter
- 4.DIV+CSS布局
- css选择器优先级深入理解
- css预处理器--less
- CSS3实现曲线阴影和翘边阴影
- CSS3让登陆面板3D旋转起来
- CSS3 3D旋转rotate效果实例介绍
- 关于css兼容性问题及一些常见问题汇总
- CSS3过渡transition效果实例介绍
- 3.CSS中常见属性详解