使用 CSS filter 属性, 可以将类似 Photoshop 的滤镜效果应用于图像和内容; 滤镜效果包括例如模糊效果, 阴影, 色彩变换和操作, 如饱和 / 去饱和色等. 该 filter 属性定义了元素 (通常是 < img>) 的可视效果, 此属性主要用于图像内容.
filter 属性是将过滤器效果应用于 web 页面上的元素 (主要是图像) 的 CSS 方法.
- filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|
- opacity()|saturate()|sepia()|url();
通过将多个过滤器函数传递给 filter 属性, 可以将多个过滤器应用于元素; 函数是空格分隔的.
例:
- img {
- filter: brightness(20%) blur(20px);
- }
此示例将两个过滤器函数应用于网页中的图像元素.
Filter 函数
注意: 滤镜通常使用百分比 (如: 75%), 当然也可以使用小数来表示 (如: 0.75).
● none: 这是默认值, 不适用任何效果.
● brightness(): 设置元素的亮度. 如果亮度为 0%则为全黑, 如果亮度为 100%, 则与原始亮度相同. 大于 100%结果的值是更明亮的元素.
● grayscale(): 设置元素的灰度, 它将元素颜色转换为黑色和白色. 灰度 0%表示原始元素, 100%表示完全灰度元素.
● sepia(): 它将图像转换为棕褐色图像, 其中 0%表示原始图像, 100%表示完全棕褐色.
● contrast(): 用于调整元素的对比度. 0%对比度表示完整的黑色元素, 100%对比度表示原始元素.
● saturate(): 用于设置元素的饱和度. 0%饱和度表示元素完全不饱和, 100%饱和表示原始图像. 大于 100%结果的值是超饱和元素.
● blur(): 它将模糊效果应用于元素. 如果未指定模糊值, 则默认值为 0.
● opacity(): 它设置图像的不透明度效果. 0%不透明度表示元素完全透明, 如果不透明度为 100%, 则表示原始图像.
● hue-rotate(): 它将色调旋转应用于图像. 该值定义将调整图像样本的色环周围的度数. 默认值为 0deg, 表示原始图像; 该值虽然没有最大值, 超过 360deg 的值相当于又绕一圈.
● invert(): 它反转元素. 默认值为 0%, 表示原始图像. 100%使图像完全反转.
● drop-shadow(): 它对元素应用阴影效果. 它接受 h-shadow,v-shadow,blur,spread 和 color 作为值.
● url(): 接受一个 xml 文件, 该文件设置了 一个 SVG 滤镜, 且可以包含一个锚点来指定一个具体的滤镜元素.
示例:
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <style type="text/css">
- img{ width: 200px; } .img1{ /* 没有滤镜效果 */ -webkit-filter: none; /* 考虑浏览器兼容性:
- 兼容 Chrome, Safari, Opera */ filter: none; } .img2{ /* 元素的亮度 */ -webkit-filter:
- brightness(30%);/* 考虑浏览器兼容性: 兼容 Chrome, Safari, Opera */ filter: brightness(30%);
- } .img3{ /* 元素的灰度 */ -webkit-filter: grayscale(80%);/* 考虑浏览器兼容性: 兼容 Chrome,
- Safari, Opera */ filter: grayscale(80%); } .img4{ /* 将图像转换为棕褐色图像 */ -webkit-filter:
- sepia(50%);/* 考虑浏览器兼容性: 兼容 Chrome, Safari, Opera */ filter: sepia(50%);
- } .img5{ /* 调整元素的对比度 */ -webkit-filter: contrast(30);/* 考虑浏览器兼容性: 兼容 Chrome,
- Safari, Opera */ filter: contrast(30); } .img6{ /* 元素的饱和度 */ -webkit-filter:
- saturate(50);/* 考虑浏览器兼容性: 兼容 Chrome, Safari, Opera */ filter: saturate(50);
- } .img7{ /* 模糊效果 */ -webkit-filter: blur(2px); /* 考虑浏览器兼容性: 兼容 Chrome,
- Safari, Opera */ filter: blur(2px); } .img8{ /* 不透明度效果 */ -webkit-filter:
- opacity(30%);/* 考虑浏览器兼容性: 兼容 Chrome, Safari, Opera */ filter: opacity(30%);
- } .img9{ /* 色调旋转 */ -webkit-filter:hue-rotate(55deg); /* 考虑浏览器兼容性: 兼容 Chrome,
- Safari, Opera */ filter: hue-rotate(55deg); } .img10{ /* 反转元素 */ -webkit-filter:
- invert(20); /* 考虑浏览器兼容性: 兼容 Chrome, Safari, Opera */ filter: invert(20);
- } .img11{ /* 反转元素 */ -webkit-filter: drop-shadow(16px 18px 15px rgba(255,
- 0, 0, 0.5)); /* 考虑浏览器兼容性: 兼容 Chrome, Safari, Opera */ filter: drop-shadow(16px
- 18px 15px rgba(255, 0, 0, 0.5)); }
- </style>
- </head>
- <body>
- <div class="demo">
- <img src="1.jpg" class="img1" />
- <img src="1.jpg" class="img2" />
- <img src="1.jpg" class="img3" />
- <img src="1.jpg" class="img4" />
- <img src="1.jpg" class="img5" />
- <img src="1.jpg" class="img6" />
- <img src="1.jpg" class="img7" />
- <img src="1.jpg" class="img8" />
- <img src="1.jpg" class="img9" />
- <img src="1.jpg" class="img10" />
- <img src="1.jpg" class="img11" />
- </div>
- </body>
- </HTML>
效果图:
来源: http://www.css88.com/qa/css3/10425.html