Bạn có thể sử dụng thuộc tính gradient tuyến tính CSS3 cùng với hình ảnh nền như sau:
#landing-wrapper {
display:table;
width:100%;
background: linear-gradient[ rgba[0, 0, 0, 0.5], rgba[0, 0, 0, 0.5] ], url['landingpagepic.jpg'];
background-position:center top;
height:350px;
}
Đây là bản demo:
#landing-wrapper {
display: table;
width: 100%;
background: linear-gradient[rgba[0, 0, 0, 0.5], rgba[0, 0, 0, 0.5]], url['//placehold.it/350x150'];
background-position: center top;
height: 350px;
color: white;
}
Lorem ipsum dolor ismet.
Đã 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: