目录
（2）、同一个元素使用多个滤镜效果，只需要将每个滤镜函数使用空格分隔
（3）、不仅仅是图像，任何 HTML 元素都可以使用滤镜效果，例如文本、视频等都可以使用滤镜来美化
前言
滤镜这个词我们不陌生，最常见的就是相机中的滤镜或者说 PhotoShop 之类的制图软件。我们用滤镜来美化图片。而在 CSS 中，我们无需借助任何软件也可以实现很多种滤镜效果，例如模糊效果、透明效果、色彩反差调整、色彩反相等等。另外，通过 CSS 中的滤镜还能对网页中的元素或者视频进行处理。
一、什么是滤镜
对图像、图像进行的视觉处理(模糊、饱和度、对比度等)。
二、滤镜的实现---filter属性
1、CSS语法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
2、常用的滤镜函数
| 滤镜 | 描述 |
|---|---|
| none | 默认值。规定无效果。 |
| blur(px) | 对图像应用模糊效果。值越大图像越模糊。 如果为指定值，则使用 0。 |
| brightness(%) | 调整图像的亮度。
|
| contrast(%) | 调整图像的对比度。
|
| drop-shadow(h-shadow v-shadow blur spread color) | 对图像应用阴影效果。 可能的值：
blur -可选。这是第三个值，阴影的模糊半径，单位必须用像素。为阴影添加模糊效果。值越大创建的模糊就越多（阴影会变得更大更亮）。不允许负值。如果未规定值，会使用 0（阴影的边缘很锐利）。 spread - 可选。这是第四个值，单位必须用像素。正值将导致阴影扩展并增大，负值将导致阴影缩小。如果未规定值，会使用 0（阴影与元素的大小相同）。 注释：Chrome、Safari 和 Opera，也许还有其他浏览器，不支持第 4 个长度；如果添加，则不会呈现。 color - 可选。为阴影添加颜色。如果未规定，则颜色取决于浏览器（通常为黑色）。 这个例子创建了红色的阴影，水平和垂直方向均为 8px，带有 10px 的模糊效果： filter: drop-shadow(8px 8px 10px red); 提示：这个滤镜类似 box-shadow 属性。 |
| grayscale(%) | 将图像转换为灰阶。
注释：不允许负值。 |
| hue-rotate(deg) | 在图像上应用色相旋转。该值定义色环的度数。默认值为 0deg，代表原始图像。 注释：最大值是 360deg。 |
| invert(%) | 反转图像中的样本。
注释：不允许负值。 |
| opacity(%) | 设置图像的不透明度级别。opacity-level 描述了透明度级别，其中：
注释：不允许负值。 提示：这个滤镜类似 opacity 属性。 |
| saturate(%) | 设置图像的饱和度。
注释：不允许负值。 |
| sepia(%) | 将图像转换为棕褐色。
注释：不允许负值。 |
| url() | url() 函数接受规定 SVG 滤镜的 XML 文件的位置，并且可以包含指向特定滤镜元素的锚点。实例： filter: url(svg-url#element-id) |
| initial | 将此属性设置为其默认值。 |
| inherit | 从其父元素继承此属性。 |
3、格式
（1）、一个图片给一个属性
div img.d1 {
filter: blur(25px);
}（2）、同一个元素使用多个滤镜效果，只需要将每个滤镜函数使用空格分隔
filter: sepia(90%) saturate(400%) brightness(150%);注意：在组合使用多个滤镜效果时，要特别注意使用的顺序，否则会产生意料之外的效果，例如在使用 grayscale() 之后再使用 sepia() 将产生一个完整的灰度图片。
（3）、不仅仅是图像，任何 HTML 元素都可以使用滤镜效果，例如文本、视频等都可以使用滤镜来美化
示例：
三、举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滤镜</title>
<style>
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.d1 {
filter: blur(25px);
}
div img.d2 {
filter: brightness(50%);
}
div img.d3 {
filter: contrast(150%);
}
div img.d4 {
filter: drop-shadow(10px 10px 20px red);
}
div img.d5 {
filter: grayscale(80%);
}
div img.d6 {
filter: hue-rotate(60deg);
}
div img.d7 {
filter: invert(100%);
}
div img.d8 {
filter: opacity(30%);
}
div img.d9 {
filter: saturate(70%);
}
div img.d10 {
filter: sepia(30%);
}
</style>
</head>
<body>
<div><img src="../HTML/image/img7.jpg"></img><span>原图</span></div>
<div><img class="d1" src="../HTML/image/img7.jpg"></img><span>模糊效果blur(25px)</span></div>
<div><img class="d2" src="../HTML/image/img7.jpg"></img><span>亮度brightness(50%)</span></div>
<div><img class="d3" src="../HTML/image/img7.jpg"></img><span>对比度contrast(150%)</span></div>
<div><img class="d4" src="../HTML/image/img7.jpg"></img><span>阴影效果drop-shadow(10px,10px,20px,red)</span></div>
<div><img class="d5" src="../HTML/image/img7.jpg"></img><span>灰阶grayscale(80%)</span></div>
<div><img class="d6" src="../HTML/image/img7.jpg"></img><span>色相旋转hue-rotate(60deg)</span></div>
<div><img class="d7" src="../HTML/image/img7.jpg"></img><span>反转invert(100%)100%为完全反转</span></div>
<div><img class="d8" src="../HTML/image/img7.jpg"></img><span>不透明度opacity(30%)</span></div>
<div><img class="d9" src="../HTML/image/img7.jpg"></img><span>饱和度saturate(70%)</span></div>
<div><img class="d10" src="../HTML/image/img7.jpg"></img><span>棕褐色sepia(30%)</span></div>
</body>
</html>
310
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
