如果你打算吸引越来越多的观众到你的网站，网站的外观是非常关键的。因此，为了提高网站的整体外观，我们非常建议在图像上添加图形效果或反映图像。CSS提供了各种属性，可以让你轻松地完成这些任务。我们已经在本篇文章中详细讨论了这些属性。在这篇文章中，我们讨论了以下内容。
CSS中的图像滤镜
为了给图像添加各种特殊效果，如不透明度、模糊度、饱和度等，可以使用CSS的过滤器属性。
语法
filter: value;
与过滤器属性相关的不同方法解释如下。
| 值 | 说明 |
|---|---|
| 无 | 这个值不增加任何效果，是一个默认值。 |
| 模糊 | 它为图像增加模糊度，并以像素为单位进行渲染。 |
| 亮度 | 它用于增加或减少图像的亮度，并以百分比形式显示数值。 |
| 对比度 | 该值调整图像的对比度，数值以百分比定义。 |
| 灰度 | 它将一个图像转化为灰度图像，也是以百分比为单位展示数值。 |
| 色调-旋转 | 这个值用来旋转一个图像，并以度为单位显示数值。 |
| 反转 | 它颠倒了图像中存在的样本，数值以百分比定义。 |
| 不透明度 | 这个值可以调整图像的透明度，取值范围是0到1。 |
| 饱和度 | 它使图像饱和，取值为百分比。 |
| 棕褐色 | 该值用于将一个图像转换为棕褐色，并以百分比为单位进行展示。 |
| 阴影（drop-shadow | 它用于在图像上应用一个阴影效果。 |
| url() | 这是一个需要包含SVG过滤器的XML文档的位置的函数，可能会渲染一个特定过滤器元素的链接。 |
| 初始值 | 这个值给了该属性的初始值。 |
| 继承 | 这个值从祖先元素中继承过滤器属性。 |
现在你知道了过滤器属性可以表现出的所有值，下面我们演示了这些值，以便更好地理解。
首先，让我们用基本的HTML在我们的网页上添加一个图片。
HTML
<img src="car.jpg" alt="Car">
在这里，我们使用标签简单地添加了一张图片。
CSS
img {
width: 30%;
height: auto;
}
现在我们使用基本的CSS来给图片添加一些宽度和高度。
输出
图片已经被添加到网页上了。
现在让我们对这张图片应用过滤器，并探索过滤器属性所能表现的各种数值。
模糊
我们已经将模糊效果设置为2px。模糊方法的数值越多，模糊程度就越大。
.blur {
filter: blur(2px);
}
输出
这是一张模糊的图像。
亮度
图片的亮度已经被设置为0.50。该值的减少将导致亮度的下降，反之亦然。
.brightness {
filter: brightness(0.50);
}
输出
图像的亮度已被成功调整。
对比度
我们已经将图像的对比度设置为160%。如果你想增加对比度，那么就按你的意愿增加这个值。
.contrast {
filter: contrast(160%);
}
输出
一个对比度效果的添加非常容易。
灰度
让我们给grayscale()方法一些数值，看看图像的变化。
.grayscale {
filter: grayscale(100%);
}
输出
使用过滤器属性的grayscale()方法将彩色图像转换为黑白图像。
色相-旋转
我们正在给hue-rotate()方法分配270度。这个方法基本上是通过围绕颜色圆圈旋转图像来修改图像的。
.hue-rotate {
filter: hue-rotate(270deg);
}
输出
这是一张色调旋转270度的图像。
反转
反转值通过反转图像来增加一些特殊效果。这里我们将图像反转80%。
.invert {
filter: invert(80%);
}
输出
图像的样本已经被反转了。
不透明度
要使图像透明，需要使用不透明度值。下面我们将图像的不透明度调整为0.4。不透明度的值越小，图像将变得越透明。
.opacity {
filter: opacity(0.4);
}
输出
这是一个透明度为40%的图像。
饱和度
为了增加饱和度，使用过滤器属性的saturate()方法。数值越大，图像的饱和度就越高。
.saturate {
filter: saturate(4);
}
输出
饱和度效果已成功添加到图像中。
棕褐色
为了给图像添加棕褐色效果，给它一些值，就像我们在下面的代码段中给它指定的50%。
.sepia {
filter: sepia(50%);
}
输出
棕褐色效果正常工作了。
阴影
为了添加一个阴影，我们使用了阴影法。阴影的长度已被分配给图像的每一面。
.shadow {
filter: drop-shadow(8px 8px 10px red);
}
输出
阴影效果已成功添加。
现在我们已经深入了解了过滤器属性，让我们继续前进，看看什么是反射属性。
CSS中的图像反射
为了反射图像，我们使用了CSS的box-reflect属性。
语法
-webkit-box-reflect: below | above | right | left;
为了使该属性在各种浏览器上完全发挥作用，需要使用前缀"-webkit-"。
注意：火狐浏览器不支持box-reflect属性。
下面我们借助相关的例子来演示其中的一些值，以便你能抓住图像反射的概念。
让我们首先在我们的网页上添加一个图像。
HTML
<img src="pisa.jpg" alt="Pisa Tower" width="200px" height="200px;">
在这里，我们已经添加了一个图像，并给它一些宽度和高度。
输出
一张图片被插入到网页中。
下面是
简单地分配box-reflect属性 "below "的值，就可以在原始图像下面反映出一个图像。
img {
-webkit-box-reflect: below;
}
输出
图像已经反映在下面了。
右边
我们来探讨一下box-reflect属性的 "右 "值。
img {
-webkit-box-reflect: right;
}
输出
图片已经成功地反射到了右边。
总结
为了给网站上出现的图像添加特殊效果，我们使用了CSS过滤属性。这个属性可以展示的各种方法有：灰度（）、饱和（）、不透明度（）、模糊（）、亮度（）、色调旋转（）等。除了添加特殊效果外，你还可以使用CSS box-reflect属性将图像反射到右边、左边、上面或下面。这篇文章涵盖了在图片上添加滤镜或反射的所有深度，并有相关的例子帮助。
