本文目錄導(dǎo)讀：

1. 使用CSS濾鏡
2. 使用CSS混合模式
3. 使用CSS偽元素

CSS圖片處理：灰度與黑白效果

在CSS中，我們可以通過一些技巧來實(shí)現(xiàn)圖片變黑白色的效果，這種處理通常用于網(wǎng)站設(shè)計或社交媒體分享，以突出圖片內(nèi)容或增加視覺沖擊力，下面，我們將詳細(xì)介紹如何使用CSS來將圖片轉(zhuǎn)換為黑白色。

使用CSS濾鏡

CSS濾鏡是一種強(qiáng)大的工具，可以用來處理圖片，包括將圖片轉(zhuǎn)換為黑白色，我們可以使用filter屬性中的grayscale()函數(shù)來實(shí)現(xiàn)灰度效果，或者使用sepia()函數(shù)來模擬舊時的棕色調(diào)。

img {
    filter: grayscale(100%);
}

上述代碼會將圖片完全轉(zhuǎn)換為灰度，即黑白色，你可以根據(jù)需要調(diào)整grayscale()函數(shù)中的百分比值，以控制灰度效果的程度。

使用CSS混合模式

除了使用濾鏡外，我們還可以使用CSS的mix-blend-mode屬性來實(shí)現(xiàn)圖片變黑白色的效果，這個屬性允許你控制圖片與背景之間的混合方式。

img {
    mix-blend-mode: multiply;
    opacity: 0.5;
}

上述代碼會將圖片與背景進(jìn)行混合，產(chǎn)生一種類似黑白色的效果，你可以根據(jù)需要調(diào)整mix-blend-mode屬性的值，以及opacity屬性的透明度值，以達(dá)到滿意的效果。

使用CSS偽元素

除了上述兩種方法外，我們還可以使用CSS偽元素來創(chuàng)建一個覆蓋在圖片上的黑白色層，這種方法需要額外的HTML標(biāo)記，但可以給你更多的控制力。

<div class="image-wrapper">
    <img src="path/to/image.jpg" alt="Image">
    <div class="overlay"></div>
</div>

在CSS中定義樣式：

.image-wrapper {
    position: relative;
    width: 200px; /* 圖片寬度 */
    height: 200px; /* 圖片高度 */
}
.image-wrapper img {
    width: 100%;
    height: 100%;
}
.image-wrapper .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black; /* 黑色背景 */
    opacity: 0.5; /* 透明度 */
}

這種方法會在圖片上創(chuàng)建一個黑色的層，并調(diào)整其透明度，以達(dá)到黑白色的效果，你可以根據(jù)需要調(diào)整背景顏色和透明度值。