Thuộc tính opacity
chỉ định độ mờ/độ trong suốt của một phần tử. Nó có thể nhận giá trị từ 0. 0 - 1. 0. Giá trị càng thấp, càng minh bạch
Ghi chú. Khi sử dụng thuộc tính opacity
để thêm độ trong suốt cho nền của một phần tử, tất cả các phần tử con của nó sẽ thừa hưởng cùng một độ trong suốt. Điều này có thể làm cho văn bản bên trong một phần tử hoàn toàn trong suốt khó đọc
Minh bạch sử dụng RGBA
Nếu bạn không muốn áp dụng độ mờ cho các phần tử con, như trong ví dụ của chúng tôi ở trên, hãy sử dụng các giá trị màu RGBA. Ví dụ sau đặt độ mờ cho màu nền chứ không phải văn bản
Bạn đã học được từ Chương Màu sắc CSS của chúng tôi rằng bạn có thể sử dụng RGB làm giá trị màu. Ngoài RGB, bạn có thể sử dụng giá trị màu RGB với kênh alpha [RGBA] - chỉ định độ mờ cho màu
Giá trị màu RGBA được chỉ định với. rgba [đỏ, lục, lam, alpha]. Tham số alpha là một số trong khoảng từ 0. 0 [hoàn toàn trong suốt] và 1. 0 [đục hoàn toàn]
Chúng ta có thể sử dụng điều này để tạo hiệu ứng di chuột mát mẻ. Bạn có thể kiểm tra cây bút mà tôi đã làm
2. Sử dụng thuộc tính bộ lọc
Chỉ cần sử dụng filter: brightness[50%];
cho hình ảnh để giảm độ sáng.
Vậy chúng ta làm điều đó như thế nào?
Thật đơn giản. để tôi chỉ cho bạn
3. Color RGBA
header {
width: 100%;
background-image: url[EauDp1hUcAAE-bK.jpg];
background-position: center;
background-size: cover;
}
Nhập chế độ FullScreenen EXIT Mode FullScreen
Các bạn sẽ nhận được kết quả như bên dưới mình thực hiện trên trang web của mình
tối
Đừng mang vào dự án
Đây là một thủ thuật hay ho giúp các bạn thêm phong phú chứ đừng dại mang vào dự án nhé. Vì một giao diện làm ra cần phải được cân nhắc đối với từng điểm một màu, hãy coi đây như một niềm vui thôi nhé