Hướng dẫn how do i put text over an image in html bootstrap? - làm cách nào để đặt văn bản lên hình ảnh trong html bootstrap?

Cần đặt văn bản lên hình ảnh trong bootstrap hoặc HTML/CSS đơn giản? Trong bài viết này, chúng tôi sẽ chia sẻ cách bạn có thể đặt văn bản đó lên hình ảnh bằng cách sử dụng Bootstrap theo 2 cách khác nhau. Cả hai phương pháp đều hoạt động trong bootstrap và trong HTML/CSS đơn giản.
In this article, we will share how you can put that text over the image using Bootstrap in 2 different ways. Both methods work in Bootstrap and in simple HTML/CSS as well.

Đây là hai cách:

• 1- Hình ảnh bên trong Phương pháp Div:
• 2- Phương pháp hình ảnh nền:
• Conclusion:

1- Hình ảnh bên trong Phương pháp Div:

.parent{
   position: relative;
   width: 500px;
}
.img{
  width:500px;
}
.top-left{
   position: absolute;
   left:0;
   top:0;
}
.top-right{
   position: absolute;
   right:0;
   top:0;
}
.bottom-left{
   position: absolute;
   left:0;
   bottom:0;
}
.bottom-right{
   position: absolute;
   right:0;
   bottom:0;
}

<div class="parent">
   <img src="image.jpg" alt="" class="img">
   <div class="top-left">This is top left</div>
   <div class="top-right">This is top right</div>
   <div class="bottom-left">This is bottom left</div>
   <div class="bottom-right">This is bottom right</div>
</div>

2- Phương pháp hình ảnh nền:

Trong ví dụ này, chúng ta cần phải có lớp phụ huynh cần được gán position:relative. Sau đó, chúng ta cần phải có hình ảnh của mình bên trong cha mẹ bên trong div

Đảm bảo chiều rộng và chiều cao của cha mẹ và hình ảnh giống nhau nếu không văn bản và hình ảnh sẽ không ở vị trí mong muốn.

Bây giờ cuối cùng thêm văn bản với các lớp, chúng tôi đã thêm 4 lớp với văn bản top-left, top-right, bottom-left và bottom-right. Lưu ý mọi lớp văn bản là position:absolute và thuộc tính Top, trái, dưới cùng và bên phải sẽ thay đổi.
For the top right text, we need to add the

<div class="parent">
   <img src="image.jpg" alt="" class="img">
   <div class="top-left">This is top left</div>
   <div class="top-right">This is top right</div>
   <div class="bottom-left">This is bottom left</div>
   <div class="bottom-right">This is bottom right</div>
</div>

<div class="parent">
   <img src="image.jpg" alt="" class="img">
   <div class="top-left">This is top left</div>
   <div class="top-right">This is top right</div>
   <div class="bottom-left">This is bottom left</div>
   <div class="bottom-right">This is bottom right</div>
</div>

<div class="parent">
   <img src="image.jpg" alt="" class="img">
   <div class="top-left">This is top left</div>
   <div class="top-right">This is top right</div>
   <div class="bottom-left">This is bottom left</div>
   <div class="bottom-right">This is bottom right</div>
</div>

<div class="parent">
   <img src="image.jpg" alt="" class="img">
   <div class="top-left">This is top left</div>
   <div class="top-right">This is top right</div>
   <div class="bottom-left">This is bottom left</div>
   <div class="bottom-right">This is bottom right</div>
</div>

<div class="parent">
   <img src="image.jpg" alt="" class="img">
   <div class="top-left">This is top left</div>
   <div class="top-right">This is top right</div>
   <div class="bottom-left">This is bottom left</div>
   <div class="bottom-right">This is bottom right</div>
</div>

<div class="parent">
   <img src="image.jpg" alt="" class="img">
   <div class="top-left">This is top left</div>
   <div class="top-right">This is top right</div>
   <div class="bottom-left">This is bottom left</div>
   <div class="bottom-right">This is bottom right</div>
</div>

2- Phương pháp hình ảnh nền:Background Image Method:

Trong ví dụ này, chúng ta cần phải có lớp phụ huynh cần được gán position:relative. Sau đó, chúng ta cần phải có hình ảnh của mình bên trong cha mẹ bên trong div

Đảm bảo chiều rộng và chiều cao của cha mẹ và hình ảnh giống nhau nếu không văn bản và hình ảnh sẽ không ở vị trí mong muốn.

.parent {
   background-image: url("image.jpg");
   background-size: cover;
   height: 500px;
   position: relative;
}
.text{
   color:white;
   position: absolute;
}
.top-left{
   top:0;
   left:0;
}

.top-right{
   top:0;
   right:0;
}
.bottom-left{
   bottom:0;
   left:0;
}

.bottom-right{
   bottom:0;
   right:0;
}

.center {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

<div class="parent">
   <div class="text top-left">This is Top left</div>
   <div class="text top-right">This is Top right</div>
   <div class="text bottom-left">This is Bottom left</div>
   <div class="text bottom-right">This is Bottom right</div>
   <div class="text center">This is Center</div>
</div>

Conclusion:

Bây giờ cuối cùng thêm văn bản với các lớp, chúng tôi đã thêm 4 lớp với văn bản top-left, top-right, bottom-left và bottom-right. Lưu ý mọi lớp văn bản là position:absolute và thuộc tính Top, trái, dưới cùng và bên phải sẽ thay đổi.

Đối với văn bản trên cùng bên trái, chúng ta cần thêm

<div class="parent">
   <img src="image.jpg" alt="" class="img">
   <div class="top-left">This is top left</div>
   <div class="top-right">This is top right</div>
   <div class="bottom-left">This is bottom left</div>
   <div class="bottom-right">This is bottom right</div>
</div>

<div class="parent">
   <img src="image.jpg" alt="" class="img">
   <div class="top-left">This is top left</div>
   <div class="top-right">This is top right</div>
   <div class="bottom-left">This is bottom left</div>
   <div class="bottom-right">This is bottom right</div>
</div>

<div class="parent">
   <img src="image.jpg" alt="" class="img">
   <div class="top-left">This is top left</div>
   <div class="top-right">This is top right</div>
   <div class="bottom-left">This is bottom left</div>
   <div class="bottom-right">This is bottom right</div>
</div>

<div class="parent">
   <img src="image.jpg" alt="" class="img">
   <div class="top-left">This is top left</div>
   <div class="top-right">This is top right</div>
   <div class="bottom-left">This is bottom left</div>
   <div class="bottom-right">This is bottom right</div>
</div>

<div class="parent">
   <img src="image.jpg" alt="" class="img">
   <div class="top-left">This is top left</div>
   <div class="top-right">This is top right</div>
   <div class="bottom-left">This is bottom left</div>
   <div class="bottom-right">This is bottom right</div>
</div>

<div class="parent">
   <img src="image.jpg" alt="" class="img">
   <div class="top-left">This is top left</div>
   <div class="top-right">This is top right</div>
   <div class="bottom-left">This is bottom left</div>
   <div class="bottom-right">This is bottom right</div>
</div>

<div class="parent">
   <img src="image.jpg" alt="" class="img">
   <div class="top-left">This is top left</div>
   <div class="top-right">This is top right</div>
   <div class="bottom-left">This is bottom left</div>
   <div class="bottom-right">This is bottom right</div>
</div>