Làm thế nào để - Chặn văn bản trên hình ảnh
Tìm hiểu cách đặt các khối văn bản trên một hình ảnh.
Khối văn bản hình ảnh
Cách đặt các khối văn bản trong hình ảnh
Bước 1) Thêm HTML:
Thí 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:
Thí 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;
}
Để 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 Định vị CSS của chúng tôi .