Cách - Định vị văn bản trên hình ảnh
Tìm hiểu cách đặt văn bản lên hình ảnh.
văn bản hình ảnh
Cách đặt văn bản vào hình ảnh
Bước 1) Thêm HTML:
Ví 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:
Ví 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%);
}
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.