Tuy nhiên, nếu bạn chỉ đặt hình ảnh phía sau văn bản của mình, văn bản có thể khó đọc, vì vậy, bạn cũng muốn thêm lớp phủ bán trong suốt, tối hơn ở trên cùng của hình ảnh, nhưng ở phía sau văn bản
Hôm nay, hãy xem cách làm điều đó chỉ với CSS
kiểu dáng cơ sở
Đây là một số kiểu dáng cơ bản cho phần tử của chúng tôi
Điều này thêm một chút không gian ở trên cùng, dưới cùng và hai bên. Nó cũng căn chỉnh văn bản ở giữa phần tử. Hãy cũng tạo cho nó một nền đen với chữ trắng
.hero {
background-color: #000000;
color: #ffffff;
padding: 1em;
text-align: center;
}
Đây là một bản demo
Bây giờ, hãy tiếp tục và thêm một hình nền
Thêm hình nền
Trong CSS của chúng tôi, chúng tôi sẽ thêm thuộc tính background-image
để thêm hình ảnh của chúng tôi
Chúng tôi cũng sẽ thêm các thuộc tính background-position
và background-size
để căn giữa hình ảnh và làm cho hình ảnh lấp đầy toàn bộ vùng chứa
.hero {
background-color: #000000;
background-image: url[//images.unsplash.com/photo-1580841129862-bc2a2d113c45?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80];
background-position: center;
background-size: cover;
color: #ffffff;
padding: 1em;
text-align: center;
}
Đây là bản demo được cập nhật
Bạn có thể nhận thấy rằng một số văn bản khó đọc do vị trí của nó trên con cua. Đây là vấn đề về khả năng truy cập và khả năng sử dụng
Hãy xem cách khắc phục điều đó
Thêm lớp phủ
Để khắc phục điều này, chúng tôi sẽ thêm lớp phủ màu đen bán trong suốt ở trên cùng, bên dưới văn bản của chúng tôi
Nếu bạn bao gồm nhiều mục với thuộc tính background-image
, thuộc tính này sẽ xếp chồng chúng, với mục được liệt kê đầu tiên ở trên cùng
Chúng tôi sẽ thêm một
.hero {
background-color: #000000;
background-image: url[//images.unsplash.com/photo-1580841129862-bc2a2d113c45?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80];
background-position: center;
background-size: cover;
color: #ffffff;
padding: 1em;
text-align: center;
}
0 vào background-image
của chúng tôi. Chúng tôi sẽ sử dụng khai báo màu .hero {
background-color: #000000;
color: #ffffff;
padding: 1em;
text-align: center;
}
0, với .hero {
background-color: #000000;
color: #ffffff;
padding: 1em;
text-align: center;
}
1 cho màu đen. Sau đó, chúng tôi sẽ sử dụng .hero {
background-color: #000000;
color: #ffffff;
padding: 1em;
text-align: center;
}
2 cho bản alpha của chúng tôi [làm cho nó minh bạch như thế nào].hero {
background-color: #000000;
background-image: linear-gradient[rgba[0, 0, 0, 0.7], rgba[0, 0, 0, 0.7]], url[//images.unsplash.com/photo-1580841129862-bc2a2d113c45?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80];
background-position: center;
background-size: cover;
color: #ffffff;
padding: 1em;
text-align: center;
}
Đây là bản demo với lớp phủ
Bây giờ có một lớp phủ bán trong suốt ở trên cùng của hình ảnh, nhưng bên dưới văn bản. Những từ này dễ nhìn hơn đối với người dùng sáng mắt, nhưng bạn vẫn có thể nhận ra hình nền bên dưới nó
Nếu bạn muốn xem video minh họa cách thức hoạt động của tính năng này, bạn tôi Steve Griffith đã thực hiện một video hướng dẫn cách đây vài tuần