Làm cách nào để tạo lớp phủ hình ảnh trong suốt trong css?

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(https://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(https://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(https://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