数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究使用 CSS3 调整图像对比度
filter 属性用于在 CSS 中为图像设置视觉效果，例如投影、对比度、亮度、饱和度、阴影等。以下是语法：
语法
filter: none | drop-shadow() | blur() | brightness() | contrast() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
如上所示，使用 filter 属性，我们可以设置以下效果：对比度、投影、模糊、亮度、灰度、色调旋转、反色、不透明度、饱和度、棕褐色、url。
要在 CSS3 中调整图像的对比度，请使用 filter 属性的 contrast 值。对比度以百分比值设置，即：
黑色图像：0%
黑色图像：设置为低于 0% 的值
实际图像：100%，即默认值
更高对比度：设置为超过 100%
假设以下为我们的图像：
更改对比度后，它将显示如下：
调整图像的对比度
示例
现在让我们看一个使用 filter 属性和 contrast 值调整图像对比度的示例：
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: brightness(120%);
filter: contrast(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>
<img class="demo" src="https://tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>
图像对比度设置为 0%
示例
让我们看一个将图像对比度设置为 0% 的示例：
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: contrast(0%);
}
</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>
<img class="demo" src="https://tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>
图像对比度设置为 100%
示例
让我们再看一个将对比度设置为 100% 的示例：
<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
filter: contrast(100%);
}
</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>
<img class="demo" src="https://tutorialspoint.com/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>
更新于： 2023-10-27
5K+ 浏览量
广告