Cách làm tối css

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é