CSS Filter Effects 属性、CSS 滤镜效果

CSS Filter Effects 调整图片颜色饱度和颜色偏移或模煳等图形效果处理，例如復古、版画、油画、老照片应用。通过使用内建的 CSS 函数 brightness 亮度、blur、grayscale、hue-rotate 可以调整图片颜色亮度、饱度和颜色偏移或模煳等图形效果处理。可以用来改变图片、背景或边框的外观，使其更多弹性化的直接图片处理或符合设计需求。

设置元素的视觉效果、用于图像内容类似 Photoshop 图片调整效果，于图片标籤中加入 filter 滤镜参数如对比度、转为灰度图、模煳或颜色调整影像。使用 box-shadow 和 filter:drop-shadow 为 PNG 透明元素新增阴影的差异。

brightness 亮度

亮度 1 等于 100% 表示亮度不变；小于 1 则降低亮度；亮度于 0% 至 100% 之间。
应用 brightness 亮度的效果例如滑鼠 hover 强调当前将选中的内容。

imgElement.style.filter = "brightness(0.5)";

filter:brightness(0.5);

contrast 对比度

对比度 1 等于 100% 表示对比度不变；小于 1 则降低对比度；对比度于 0% 至 100% 之间。

imgElement.style.filter = "contrast(0.5)";

filter:contrast(0.5);

saturate 颜色饱和度、鲜艷度

饱和度 1 等于 100% 表示颜色不变；小于 1 则降低饱和度；颜色饱和度于 0% 至 100% 之间。
颜色饱和度 saturate 亦可在版面上图片产生互动时不同的效果。

imgElement.style.filter = "saturate(0.5)";

filter:saturate(0.5);

sepia 旧照片偏黄色效果

旧照片 1 等于 100% 表示颜色不变；小于 1 则偏向旧照片；其值于 0% 至 100% 之间。

imgElement.style.filter = "sepia(0.5)";

filter:sepia(0.5);

grayscale 灰阶效果

灰阶度 1 等于 100% 表示灰阶不变；小于 1 则灰阶度于 0% 至 100% 之间。

imgElement.style.filter = "grayscale(0.5)";

filter:grayscale(0.5);

invert 负片效果

负片效果 1 等于 100% 表示灰阶不变；小于 1 则增加负片效果于 0% 至 100% 之间。50% 则刚好看不到图片。
负片效果 invert 反转色亦可应用到 hover 效果创造力、增加互动的反差效果。

imgElement.style.filter = "invert(0.6)";

filter:invert(0.6);

hue-rotate 色相旋转

旋转色相环可以产生色调变化效果。旋转色相范围使用角度 (0deg~360deg) 来控制。

imgElement.style.filter = "hue-rotate(180deg)";

filter:hue-rotate(180deg);

opacity 透明程度

0 表示完全透明、1 表示完全不透明，与 CSS 使用 opacity:0.5 属性类似。

imgElement.style.filter = "opacity(0.5)";

filter:opacity(0.5);

blur 模煳程度

照片失焦效果、毛玻璃效果、设定模煳的程度。设定单位、例如：px、em。

imgElement.style.filter = "blur(3px)";

filter:blur(3px);

CSS Filter Effects 目前已经被大多数的浏览器支持，并且有许多网站已经开始使用它们来增强网页的效果表现。可以在网页上实现各种图像处理效果的技术例如模煳、灰度、色调、对比度等。CSS 滤镜效果可以让必威体育手机客户端在不使用图片或 JavaScript 的情况下，创造出更有动态的视觉效果，可以让网站呈现出更多元和丰富的视觉效果。CSS 滤镜效果目前已经被大多数的现代浏览器支持，并且有许多网站已经开始使用它们来增强网页的表现。例如使用模煳滤镜来创造出深度感或聚焦效果，或者使用 CSS Filter Effects 色调滤镜来改变网页中呈现的图片的色彩风格，例如需要表达图片中的对比的情况。