資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何使用CSS將影像顏色更改為黑白？
使用CSS將影像顏色更改為黑白是一個簡單的過程，可以使用多種方法實現。在本文中，我們將學習和理解兩種不同的使用CSS將影像更改為黑白的方法。
本文中有一張圖片，我們的任務是使用CSS將圖片顏色更改為黑白。
將影像顏色更改為黑白的方法
以下列出了使用CSS將影像顏色更改為黑白的方法，並附帶逐步說明和完整的示例程式碼。
使用grayscale過濾器
為了將影像顏色更改為黑白，我們使用了grayscale 過濾器。
- grayscale過濾器接受0%-100%之間的值。
- 過濾器值為0%表示影像應為全綵，100%表示影像應完全為黑白。
- 我們使用了“filter: grayscale(100%);”過濾器，它將影像更改為黑白。
示例
在這個示例中，我們實現了上述步驟，將影像顏色更改為黑白。
<html>
<head>
<title>
Changing color of image in css using a "grayscale" filter
</title>
<style>
body {
text-align: center;
}
.img {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
}
</style>
</head>
<body>
<h3>
Change the color of an image to black
and white using CSS
</h3>
<p>
In this example we have used grayscale
filter to Change the color of an image
to black and white.
</p>
<h3>Original Image:</h3>
<img src="/css/images/logo.png" alt="image">
<h3>After using "grayscale" filter:</h3>
<br>
<img class="img" src="/css/images/logo.png" alt="image">
</body>
</html>
使用brightness和saturate過濾器
在這種方法中，我們使用了CSS brightness和saturate過濾器將影像顏色更改為黑白。
- brightness過濾器用於調整整體亮度，控制影像的亮度或暗度。
- “saturate”過濾器用於調整飽和度，控制顏色的強度。
- 我們使用了“filter: brightness(0.5) saturate(0%);”過濾器將影像顏色更改為黑白。
示例
這是一個實現上述步驟以將影像顏色更改為黑白的示例。
<html>
<head>
<title>
Changing color of image using "brightness" and "saturate" filters
</title>
<style>
body {
text-align: center;
}
.img {
filter: brightness(0.5) saturate(0%);
}
</style>
</head>
<body>
<h3>
Change the color of an image to black
and white using CSS
</h3>
<p>
In this example we have used brightness
and saturate filter to Change the color
of an image to black and white.
</p>
<h3>Original Image:</h3>
<img src="/css/images/logo.png" alt="image">
<h3>
After using "brightness" and "saturate" filters
</h3>
<br>
<img class="img" src="/css/images/logo.png" alt="image">
</body>
</html>
結論
使用CSS將影像轉換為黑白是一個簡單的過程。在本文中，我們瞭解瞭如何使用CSS將影像顏色更改為黑白。我們討論了兩種不同的方法，一種是使用**grayscale**過濾器，另一種是使用**brightness**和**saturate**過濾器。
更新於：2024年7月3日
15K+ 次瀏覽
廣告