資料結構
網路
關係型資料庫管理系統 (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.tw/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.tw/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.tw/mongodb/images/mongodb-mini-logo.jpg" alt="MongoDB" width="160" height="150">
<h1>Learn MongoDB</h1>
<img class="demo" src="https://tutorialspoint.tw/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.tw/python/images/python.jpg" alt="Python" width="460" height="150">
<h1>Learn Python</h1>
<img class="demo" src="https://tutorialspoint.tw/python/images/python.jpg" alt="Python" width="460" height="150">
</body>
</html>
更新於：2023-12-27
16K+ 次瀏覽
廣告