資料結構
網路
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.tw/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<img class="demo" src="https://tutorialspoint.tw/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.tw/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<img class="demo" src="https://tutorialspoint.tw/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.tw/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
<h1>Learn MySQL</h1>
<img class="demo" src="https://tutorialspoint.tw/mysql/images/mysql-mini-logo.jpg" alt="MySQL" width="160" height="150">
</body>
</html>
更新於： 2023-10-27
5K+ 瀏覽量
廣告