CSS 滤镜

本课属于 Coddy HTML 学习旅程的“精通 CSS”单元。第 22 课，共 43 课。

滤镜可以用有趣的效果直观地改变图像、背景，甚至文本。这就像戴上太阳镜、打开聚光灯，或切换到黑白模式：只需一行 CSS。

1. 模糊（px）：让元素看起来柔和且失焦。

img {
  filter: blur(5px);
}
//slightly out of focus

2. 亮度(%)：控制事物看起来有多亮或多暗。

img {
  filter: brightness(150%);
}
//brightens like turning on a spotlight.

3. 灰度（%）：将颜色转换为黑白。

img {
  filter: grayscale(100%);
}
//classic vintage or newspaper effect.

4. Sepia(%)：添加温暖的棕褐色调，营造复古照片的感觉。

img {
  filter: sepia(70%);
}
//like an old photo album.

还有很多其他滤镜可以尝试！你可以尽情探索，看看能创造出哪些有趣的效果。

挑战

简单

画廊中有 4 张图片。你的挑战是为每张图片应用以下滤镜：

第一张图片（模糊）：应用 blur(3px) 滤镜，让图片变得柔和、失焦。
第二张图片（亮度）：使用 brightness(2.0) 让图片变亮。
第三张图片（灰度）：应用 grayscale(100%)，将图片变成黑白色。
第四张图片（棕褐色）：使用 sepia(70%)，让图片呈现温暖的复古色调。

每张图片都放在一个包装元素 <div> 中，其类名与对应的滤镜同名（blur、brightness、grayscale、sepia）。使用后代选择器选中图片，例如 .blur img { filter: blur(3px); }，并为每张图片各写一条规则。

亲手试试

<!DOCTYPE html>
<html>
<head>
    <style>
    .gallery {
        display: flex;
        flex-wrap: wrap; /* Allows the images to wrap into two rows */
        gap: 20px; /* Space between the images */
        justify-content: center; /* Centers the images */
        margin-top: 20px;
    }
    .gallery img {
        width: 200px;
        height: 260px;
    }
    
    /* Write your CSS rule here */
    
    </style>
</head>
<body>
    <h1>CSS Filters Gallery Challenge</h1>

    <div class="gallery">
        <div class="blur">
            <img src="https://upload.wikimedia.org/wikipedia/commons/c/ce/German_shepherd_dog_colt.jpg" alt="Blurred Image">
        </div>
        <div class="brightness">
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/86/Dog%2C_Helgafell%2C_Sn%C3%A6fellsnes_peninsula%2C_Iceland%2C_20230505_1507_5224.jpg" alt="Brightened Image">
        </div>
        <div class="grayscale">
            <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/Pyreneean_Mountain_dog_guarding_sheep.jpg" alt="Grayscale Image">
        </div>
        <div class="sepia">
            <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Fawn_and_white_Welsh_Corgi_puppy_standing_on_rear_legs_and_sticking_out_the_tongue.jpg" alt="Sepia Image">
        </div>
    </div>
</body>
</html>