Làm cho hình nền tối hơn CSS

Question

Nếu bạn cần làm tối (hoặc làm sáng) hình ảnh qua CSS, bạn sẽ rất vui khi biết rằng các phiên bản CSS hiện đại cho phép bạn thực hiện việc này khá dễ dàng

Đây là một hình ảnh mà chúng tôi sẽ sử dụng

Để làm tối hình ảnh, bạn chỉ cần chọn hình ảnh qua CSS và áp dụng bộ lọc độ sáng cho hình ảnh, như minh họa bên dưới (điều này giả định rằng hình ảnh nằm bên trong div với một lớp vùng chứa, bạn có thể thay đổi hình ảnh của mình cho phù hợp

Đã có lúc tôi phải tìm khắp nơi để tìm ra cách làm cho hình ảnh tối hơn và bây giờ tôi biết 3 cách để làm điều này. vì vậy hãy đi thẳng vào vấn đề

1. Sử dụng độ mờ

thiết lập cơ bản

Đây là ảnh gốc

Đặt css

Đầu tiên, chúng tôi giảm độ mờ của ảnh

img {
opacity: 0.5;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bằng cách đặt độ mờ thành 0. 5 , hình ảnh sẽ chuyển sang màu trắng (ish)

Bây giờ tất cả những gì chúng ta cần làm để làm cho nó tối hơn là thay đổi màu nền thành màu đen

ul {
background-color: black;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Chúng ta có thể sử dụng điều này để tạo hiệu ứng di chuột thú vị. 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

3. màu RGBA

Giả sử bạn muốn đặt một hình ảnh làm nền. nếu bạn không làm tối nó, mọi thứ bạn đặt trên hình ảnh như các nút, văn bản, v.v. sẽ trông không bắt mắt. bạn cần làm tối nó để làm nổi bật những nội dung khác
Vậy chúng ta làm điều đó như thế nào?
Thật đơn giản. để tôi chỉ cho bạn

thiết lập cơ bản

header {
    width: 100%;
    background-image: url(EauDp1hUcAAE-bK.jpg);
    background-position: center;
    background-size: cover;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Để làm cho nó tối hơn, chúng ta thêm linear-gradient(black,black).
Chọn màu và giảm độ trong suốt của màu

header {
background-image: linear-gradient(rgba(0, 0, 0, 0.527),rgba(0, 0, 0, 0.5)) , url(EauDp1hUcAAE-bK.jpg);
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Tóm lại

Sử dụng thuộc tính độ mờ và bộ lọc để làm tối hình ảnh và tạo hiệu ứng di chuột thú vị với hình ảnh đó
Sử dụng màu RGBA để làm cho hình nền của bạn tối hơn

Bạn có thể kết nối với tôi trên twitter