Làm thế nào để - Định vị văn bản trên một hình ảnh
Tìm hiểu cách đặt văn bản trên hình ảnh.
Văn bản Hình ảnh
Dưới cùng bên trái
Trên cùng bên trái
Trên cùng bên phải
Góc phải ở phía dưới
Căn giữa
Cách đặt văn bản trong hình ảnh
Bước 1) Thêm HTML:
Thí dụ
<div class="container">
<img src="img_snow_wide.jpg" alt="Snow"
style="width:100%;">
<div class="bottom-left">Bottom Left</div>
<div class="top-left">Top Left</div>
<div class="top-right">Top
Right</div>
<div class="bottom-right">Bottom Right</div>
<div class="centered">Centered</div>
</div>
Bước 2) Thêm CSS:
Thí dụ
/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
color: white;
}
/* Bottom
left text */
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
}
/* Top left text */
.top-left {
position:
absolute;
top: 8px;
left: 16px;
}
/* Top right text */
.top-right {
position: absolute;
top: 8px;
right: 16px;
}
/* Bottom right text */
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
}
/* Centered text
*/
.centered {
position:
absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Để 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 .