資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 CSS 使影像變暗？
要使用 CSS 使影像變暗，我們將討論三種不同的方法。在本文中，我們將瞭解如何使用 CSS 屬性和方法（例如疊加半透明層）來對影像應用變暗效果。
本文中有一個影像，我們的任務是使用 CSS 使影像變暗。我們將顯示變暗前後的影像。
使用 CSS 使影像變暗的方法
以下是使用 CSS 使影像變暗的方法列表，我們將在本文中逐步驟進行解釋並提供完整的示例程式碼。
使用 filter 屬性使影像變暗
要使用 CSS 使影像變暗，我們將使用 filter 屬性調整影像的亮度。
- 我們使用了 img 標籤兩次，一次插入影像，一次顯示變暗後的影像。
- 然後，我們使用 CSS 的 height 和 width 屬性設定輸出影像的尺寸。
- 我們使用 "filter: brightness(50%);" 透過 filter 屬性設定影像的亮度值，從而使影像變暗。
示例
這是一個完整的示例程式碼，實現了上述步驟，使用 CSS 的 filter 屬性使影像變暗。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Darken Image using CSS filter property
</title>
<style>
.darken-image {
filter: brightness(50%);
height: 65px;
width: 350px;
}
</style>
</head>
<body>
<h3>
To Darken an Image Using CSS
</h3>
<p>
In this example we have used <strong>filter
</strong>property to darken an Image using
CSS.
</p>
<h4>
Original Image:
</h4>
<img src="/html/images/test.png">
<h4>
Darkened Image:
</h4>
<div class="darken-image">
<img src="/html/images/test.png">
</div>
</body>
</html>
使用 opacity 屬性使影像變暗
在這種方法中，要使用 CSS 使影像變暗，我們將使用 ::after 偽元素建立疊加層，使影像變暗。::after 偽元素會在影像頂部新增一層。
- 我們在 darken-image 類中使用了 "position: relative;"，以便疊加層相對於父 div 定位，而不是整個頁面。
- 我們在 ::after 偽元素中使用了 "position: absolute;"，以便疊加層放置在影像上，覆蓋整個影像，透過設定 top、left、height 和 width 的 CSS 屬性來實現。
- 我們使用了 ""background-color: black" 和 opacity，它們一起在影像上建立了一個變暗的疊加層。
示例
這是一個完整的示例程式碼，實現了上述步驟，使用 CSS 的 opacity 屬性使影像變暗。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Darken Image using CSS filter property
</title>
<style>
.darken-image {
position: relative;
display: inline-block;
}
.darken-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
}
</style>
</head>
<body>
<h3>
To Darken an Image Using CSS
</h3>
<p>
In this example we have used <strong>opacity
</strong> property with background-color to
darken the image using CSS.
</p>
<h4>
Original Image:
</h4>
<img src="/html/images/test.png">
<h4>
Darkened Image:
</h4>
<div class="darken-image">
<img src="/html/images/test.png">
</div>
</body>
</html>
使用線性漸變疊加使影像變暗
在這種方法中，我們將使用 linear-gradient 建立疊加層，使影像變暗。
- 我們使用了 darken-image 類，它使用 CSS 線性漸變和 rgba 屬性建立了 0.5 不透明度的黑色疊加效果。
- 該 url 將影像放置線上性漸變的後面。
- 最後，我們使用 CSS 的 height 和 width 屬性設定了變暗後的影像尺寸。
示例
這是一個完整的示例程式碼，實現了上述步驟，使用 linear-gradient 疊加使影像變暗。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Darken Image using CSS filter property
</title>
<style>
.darken-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url("/html/images/test.png");
height: 65px;
width: 350px;
}
</style>
</head>
<body>
<h3>
To Darken an Image Using CSS
</h3>
<p>
In this example we have used <strong>background
-image</strong> with linear-gradient to darken
the Image using CSS.
</p>
<h4>
Original Image:
</h4>
<img src="/html/images/test.png">
<h4>
Darkened Image:
</h4>
<div class="darken-image"></div>
</body>
</html>
結論
要使用 CSS 使影像變暗，在本文中，我們瞭解了三種不同的方法，分別是使用 CSS 的 filter 屬性、使用 opacity 屬性和使用 linear-gradient 疊加。
更新於： 2024年9月4日
20K+ 瀏覽量
廣告