這篇文章要介紹如何利用 CSS 創建一個「漫畫風格」的圖片濾鏡效果

HTML

創建一個容器 comic-effect，包含一張圖片和一個疊加效果的 div

<div class="comic-effect">
    <img src="picture3.jpg" alt="Comic Style" class="image">
    <div class="overlay"></div>
</div>

• comic-effect ： 是包裹圖片和疊加效果的外層容器
• image ： 應用漫畫風格的圖片
• overlay ： 一個疊加層，用於創建漫畫風格的濾鏡效果

CSS

1. 設定頁面樣式

使用 Flexbox 將頁面內容居中顯示，確保圖片位於畫面正中間

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

• justify-content 和 align-items ： 讓頁面內容居中顯示

2. 圖片容器樣式

comic-effect 的容器是相對定位，用來控制疊加層的位置，與圖片精確對齊

.comic-effect {
    position: relative;
}

3. 圖片樣式

對圖片進行漫畫風格的濾鏡處理，通過灰階、對比度和亮度的調整呈現圖片風格化

.image {
    width: 400px; 
    height: auto; 
    filter: grayscale(100%) contrast(200%) brightness(90%);
}

• filter：是 CSS 濾鏡，可以將圖片轉為灰階( grayscale）、增加對比度（contrast 200%）和略微降低亮度（brightness 90%），創造出漫畫效果

4. 疊加層樣式

使用徑向漸變來實現漫畫風的陰影效果

.overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: radial-gradient(circle, rgba(0, 0, 0, 0.2) 10%, transparent 40%);
   mix-blend-mode: multiply;
}

• radial-gradient ： 創建一個徑向漸變效果，從黑色到透明，模擬漫畫中的陰影
• mix-blend-mode : 通過混合模式將陰影與圖片融合在一起

結果呈現

• 圖片來源

更改前

更改後