CSS filter

CSS 滤镜用于为文本、图像和其他网页元素设置视觉效果。CSS 的 filter 属性允许我们在元素显示之前，对其渲染的颜色或模糊、偏移等效果进行访问。

CSS 滤镜属性的语法如下。

语法

让我们结合示例来讨论这些属性值。

brightness()

顾名思义，它用于设置元素的亮度。如果亮度为 0%，则表示完全黑色，而 100% 亮度则表示原始状态。它也可以接受大于 100% 的值，以提供更亮的效果。

我们可以通过以下图示来理解它。

示例

blur()

它用于对元素应用模糊效果。如果未指定模糊值，则默认值为 0。blur() 属性的参数不接受百分比值。值越大，模糊效果越强。

示例

invert()

它用于反转输入图像的样本。其 100% 的值表示完全反转，0% 的值表示保持不变。它不允许负值。

示例

saturate()

它设置元素的饱和度。0% 的饱和度表示完全不饱和的元素，而 100% 的饱和度表示原始状态。允许大于 100% 的值，以提供超饱和的效果。此属性不能使用负值。

示例

drop-shadow()

它对输入图像应用阴影效果。它接受的值为 h-shadow、v-shadow、blur、spread 和 color。

示例

contrast()

它调整输入的对比度。0% 的值会创建一个完全黑色的图像，而 100% 的值则保持不变，即表示原始状态。允许大于 100% 的值，以提供对比度较低的效果。

示例

opacity()

它用于为输入图像应用透明度。0% 的值表示完全透明，而 100% 的值表示原始图像，即完全不透明。

让我们通过图示来理解它。

示例

hue-rotate()

它对输入图像应用色相旋转。其参数值决定了图像在色轮上调整的角度。默认值为 0 度，表示原始图像。最大值为 360 度。

让我们通过图示来理解它。

示例

grayscale()

它将输入图像转换为黑白。0% 的灰度表示原始状态，而 100% 表示完全灰度。它将对象的颜色转换为 256 种灰色。

示例

sepia()

它用于将图像转换为棕褐色图像。0% 的值表示原始图像，而 100% 的值表示完全棕褐色。

示例