使用 CSS3 设置图像亮度

要设置 CSS 中的图像亮度，可以使用 filter brightness (%)。请记住，值为 0 会使图像变为黑色，100% 为原始图像和默认值。其余的，您可以根据自己的选择设置任何值，但超过 100% 的值会使图像更亮。filter 属性用于在 CSS 中为图像设置视觉效果，例如投影、对比度、亮度、饱和度和阴影。

语法

filter: none |  drop-shadow() | blur() | brightness() | contrast() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

如上所示，使用filter 属性，我们可以设置以下效果：对比度、投影、模糊、亮度、灰度、色调旋转、反转、不透明度、饱和度、棕褐色、url。

要调整 CSS3 中图像的亮度，请使用 filter 属性的brightness 值。亮度使用百分比值设置，例如：

  • 黑色图像：0%

  • 黑色图像：低于 0% 的值

  • 实际图像：100%，即默认值

  • 更亮：设置超过 100%

图像亮度

现在让我们来看一个使用 filter 属性和 brightness() 值来增亮图像的示例：

img.demo {
   filter: brightness(120%);
}

示例

让我们看一个例子：

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      img.demo {
         filter: brightness(120%);
      }
   </style>
</head>
<body>
   <h1>Learn MySQL</h1>
   <img src="https://tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
   <h1>Learn MySQL</h1>
   <p>Below image is brighter than the original image above.</p>
   <img class="demo" src="https://tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

图像亮度设置为 0%

让我们来看一个图像亮度设置为 0% 的示例。它将显示一个黑色图像：

img.demo {
   filter: brightness(0%);
}

示例

这是一个例子：

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      img.demo {
         filter: brightness(0%);
      }
   </style>
</head>
<body>
   <h1>Learn MongoDB</h1>
   <img src="https://tutorialspoint.com/mongodb/images/mongodb-mini-logo.jpg" alt="MongoDB" width="160" height="150">
   <h1>Learn MongoDB</h1>
   <img class="demo" src="https://tutorialspoint.com/mongodb/images/mongodb-mini-logo.jpg" alt="MongoDB" width="160" height="150">
</body>
</html>

图像亮度设置为 100%

让我们来看一个图像亮度设置为 100% 的示例：

img.demo {
   filter: brightness(100%);
}

示例

这是一个例子：

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      img.demo {
         filter: brightness(100%);
      }
   </style>
</head>
<body>
   <h1>Learn Python</h1>
   <img src="https://tutorialspoint.com/python/images/python.jpg" alt="Python" width="460" height="150">
   <h1>Learn Python</h1>
   <img class="demo" src="https://tutorialspoint.com/python/images/python.jpg" alt="Python" width="460" height="150">
</body>
</html>

更新于：2023-12-27

16K+ 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告