Hướng dẫn make background image darker css - làm cho hình nền tối hơn css

Đã có lúc tôi phải nhìn khắp nơi để tìm hiểu làm thế nào để 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 đến điểm.

1. Sử dụng độ mờ:

Đặt cơ bản:

Đây là bức ảnh ban đầu:

Cài đặt CSS:

Đầu tiên chúng ta hạ thấp độ mờ của ảnh

img {
opacity: 0.5;
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

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;
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

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:

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.
So how do we do that?
It's simple. let me show you

3. Màu sắc RGBA:

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

Nhập chế độ FullScreenen EXIT Mode FullScreen

Bằng cách đặt độ mờ thành 0,5, hình ảnh sẽ chuyển sang màu trắng (ish)
Choose a color and lower the transparency of the color

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

Nhập chế độ FullScreenen EXIT Mode FullScreen

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:
• 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: