Ảnh chính làm mờ
Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 43 trên 43.
Thử thách
DễCó một hình ảnh về thành phố New York trong phần .gallery.
Nhiệm vụ của bạn là áp dụng bộ lọc làm mờ với giá trị 2px cho hình ảnh đó bằng CSS.
Tự làm thử
<html>
<head>
<title>Blurred Hero Image</title>
<style>
/* Add your CSS styles here: */
img {
width: 100%;
}
</style>
</head>
<body>
<div class="gallery">
<img src="https://upload.wikimedia.org/wikipedia/commons/0/05/View_of_Empire_State_Building_from_Rockefeller_Center_New_York_City_dllu.jpg
">
</div>
</body>
</html>
Tất cả bài học trong Thành thạo CSS
1Làm chủ bộ chọn: Kết hợp
Giới thiệuBộ chọn hậu duệBộ chọn conBộ chọn anh em liền kềBộ chọn anh em tổng quátThử thách ôn tập7Xây dựng giao diện với CSS Grid
Cơ bản về GridĐịnh vị phần tử theo hàng của GridCác vùng được đặt tênThử thách ôn tập3Các lớp giả cấu trúc
Các lớp giả cấu trúcChọn phần tử con đầu tiênChọn phần tử con cuối cùngSức mạnh của mẫu: dùng nth-childThử thách ôn tập6Trang đích
Tạo kiểu cho phần đầu trangTạo kiểu cho nútBố cục phầnBố cục thẻThêm các chi tiết hoàn thiện9Thử thách cuối cùng
Làm nổi bật menu đang hoạt độngTô màu xen kẽ các hàng trong bảngHiệu ứng khi di chuột lên nútBố cục thẻ dạng lướiẢnh chính làm mờTự luyện tập: Playground Web