CSS滤镜效果：对比度、亮度、色相、透明度

本文主要介绍CSS滤镜效果，包括对比度、亮度、色相、透明度等常用属性，同时提供对应的代码案例，方便初学者学习。

一、CSS滤镜效果基础概念

CSS滤镜效果是一种通过改变元素外观的方法，它可以通过一系列滤镜属性改变图像的外观，其中包括对比度、亮度、色相、透明度等。

二、CSS滤镜效果常用属性

1. 对比度（contrast）

对比度属性可以调整图像的对比度，其值为0-1之间的小数，值越大对比度越强。代码如下：

img {
  filter: contrast(1.5);
}

2. 亮度（brightness）

亮度属性可以调整图像的亮度，其值为0-1之间的小数，值越大亮度越高。代码如下：

img {
  filter: brightness(0.8);
}

3. 色相（hue-rotate）

色相属性可以调整图像的色相（即颜色），其值为0-360之间的整数。代码如下：

img {
  filter: hue-rotate(90deg);
}

4. 透明度（opacity）

透明度属性可以调整图像的透明度，其值为0-1之间的小数，值越大越不透明。代码如下：

img {
  filter: opacity(0.5);
}

三、代码案例

以下是一个简单的代码案例，展示了如何使用CSS滤镜效果调整图像的对比度、亮度、色相、透明度。

img {
  filter: contrast(1.5) brightness(0.8) hue-rotate(90deg) opacity(0.5);
}

通过修改对应的属性值，可以调整图像的外观。

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： HTML标签及其用途解析
• 下一篇： CSS网格布局（Grid）：自适应网格、响应式布局