Cách thực hiện - Khối văn bản trên hình ảnh
Tìm hiểu cách đặt khối văn bản lên hình ảnh.
Khối văn bản hình ảnh
Cách đặt khối văn bản vào hình ảnh
Bước 1) Thêm HTML:
Ví dụ
<div class="container">
<img src="nature.jpg" alt="Norway"
style="width:100%;">
<div class="text-block">
<h4>Nature</h4>
<p>What a beautiful sunrise</p>
</div>
</div>
Bước 2) Thêm CSS:
Ví dụ
/* Container holding the image and the text */
.container {
position: relative;
}
/* Bottom right text */
.text-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
Hãy tự mình thử »Để tìm hiểu thêm về cách tạo kiểu cho hình ảnh, hãy đọc hướng dẫn Hình ảnh CSS của chúng tôi.
Để tìm hiểu thêm về định vị CSS, hãy đọc hướng dẫn về Vị trí CSS của chúng tôi.