说起滤镜，大家可能首先想到的是photoshop等绘图软件，通过滤镜可以美化图片。 在CSS中，我们无需使用任何软件就可以实现多种滤镜效果，例如模糊效果、透明效果、颜色对比度调整、颜色反转等等。 此外，网页中的元素或视频可以通过CSS中的过滤器进行处理。 在本节中，我们将学习 CSS 中过滤器的使用。
CSS中滤镜的效果需要通过filter属性和一些函数来实现，如下所示：
过滤器说明
没有任何
默认值，表示没有效果
模糊（像素）
为图像设置高斯模糊，默认值为0，单位为像素，值越大越模糊
亮度（％）
调整图像的亮度，默认值为100%css 模糊，代表原始图像； 0%表示无色温，图像将是全黑的； 当该值超过100%时，图像会显得更亮
对比（％）
调整图像的对比度，默认值为100%，代表原始图像； 0% 将使图像全黑； 当该值超过100%时，图像将获得更高的对比度
drop-shadow（h 阴影 v 阴影模糊扩散颜色）
为图片添加阴影效果，参数说明如下： 注：Chrome、Safari、Opera等浏览器不支持第四个参数，如果添加则没有效果
灰度(%)
将图像转换为灰度图像。 默认值为0%，表示原始图像； 100%表示图像完全转换为灰度图像（即黑白图像）。 不允许使用负值
色调旋转(deg)
对图像应用色调旋转。 该值用于定义色环的程度。 默认值为0deg，代表原始图像，最大值为360deg
倒置（％）
反转图像，默认值为0%，表示原图像； 100%表示完全相反，不允许负值
不透明度(%)
设置图像的不透明度，默认值为100%，表示原始图像； 0%表示完全透明，不允许负值
饱和度(%)
设置图像的饱和度，默认值为100%，表示原始图像； 0%表示图像完全不饱和，不允许负值
棕褐色(%)
将图像转换为棕褐色，默认值为0%，表示原始图像； 100%表示图像完全变成棕褐色，不允许负值
网址（）
url()函数用于指定设置了SVG过滤器的XML文件，并且可以包含锚点来指定特定的过滤器元素
最初的
将属性设置为其默认值
继承
从父元素继承该属性的值
提示：这些CSS函数的参数值基本都在0~1（0%~100%）之间，但也有少数例外，例如blur()函数的参数值以像素为单位，而Hue-rotate( ) 函数参数值以“deg”为单位。
[示例] 下面是一个示例来演示 CSS 中过滤器的使用：
div {
width: 200px;
height: 200px;
float: left;
position: relative;
}
div span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-shadow: 1px 1px 2px black;
}
img {
width: 100%;
}
div img.blur {
filter: blur(4px);
}
div img.brightness {
filter: brightness(250%);
}
div img.contrast {
filter: contrast(180%);
}
div img.grayscale {
filter: grayscale(100%);
}
div img.huerotate {
filter: hue-rotate(180deg);
}
div img.invert {
filter: invert(100%);
}
div img.opacity {
filter: opacity(50%);
}
div img.saturate {
filter: saturate(7);
}
div img.sepia {
filter: sepia(100%);
}
div img.shadow {
filter: drop-shadow(8px 8px 10px green);
}
原始图像
blur(4px)
brightness(250%)
contrast(180%)
grayscale(100%)
hue-rotate(180deg)
invert(100%)
opacity(50%)
saturate(7)
sepia(100%)
drop-shadow(8px 8px 10px green)
运行结果如下图所示：
图：过滤器属性演示
另外，还可以对同一个元素使用多种滤镜效果css 模糊，只需要将各个滤镜功能用空格分隔即可，示例代码如下：
div {
width: 300px;
height: 300px;
position: relative;
}
div span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-shadow: 1px 1px 2px black;
}
img {
width: 100%;
filter: sepia(90%) saturate(400%) brightness(150%);
}
sepia(90%) saturate(400%) brightness(150%)
运行结果如下图所示：
图：过滤器组合
注意：多种滤镜效果组合使用时，要十分注意使用顺序，否则会形成意想不到的效果。 例如，在grayscale()之后使用sepia()将形成完整的灰度图像。
不仅是图片，任何HTML元素都可以使用滤镜效果，比如文本、视频等都可以通过滤镜进行美化，示例代码如下：
div {
filter: blur(2px) contrast(50%) brightness(80%);
}
说起滤镜可能大家首先想到的就是 PhotoShop 之类的制图软件，通过此类软件的滤镜可以对图片进行美化。而在 CSS 中，我们无需借助任何软件也可以实现很多种滤镜效果，例如模糊效果、透明效果、色彩反差调整、色彩反相等等。另外，通过 CSS 中的滤镜还能对网页中的元素或者视频进行处理。
运行结果如下图所示：
图：为页面中其他元素设置滤镜效果
提示：IE浏览器不支持filter属性
hint.css是使用css的提示框
源代码示例有：
HINT.css
一个提示框tooltip库使用CSS
Extra
自己执行的业务逻辑的验证码：
使用业务意义进行测试
一个提示框tooltip库使用CSS
| 用户名： | （用户名由5-10位字母和数字组成） 只能使用a标签 |
在里面进行测试后发现（IE9以前是浏览器）只能在a标签中使用css 提示css 提示，使用范围有限，所以在项目中使用时要注意
发表评论