数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究使用 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%);
}
示例
让我们看一个例子：
<!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>
图像亮度设置为 0%
让我们来看一个图像亮度设置为 0% 的示例。它将显示一个黑色图像：
img.demo {
filter: brightness(0%);
}
示例
这是一个例子：
<!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%);
}
示例
这是一个例子：
<!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+ 次浏览
广告