Viết chữ lên hình ảnh trong HTML giúp bạn trang trí website đẹp hơn. Để làm được điều này bạn hãy tham khảo bài viết chèn text lên ảnh với các bước hướng dẫn dễ hiểu dưới đây.
Có 2 trường hợp xảy ra ở đây
1. Chèn chữ lên một bức ảnh
Bạn sẽ thực hiện chạy đoạn code này
<!DOCTYPE html>
<html>
<head>
<style>
.text {
color: #fff;
position: absolute;
top: 10px
}
</style>
</head>
<body>
<h1 class="text">Đây là đoạn văn bản</h1>
<img src="https://quynhweb.pro/wp-content/uploads/2019/12/Quachquynh.com__background-dep-cho-may-tinh-laptop-va-pc-7.jpg" width="100%"/>
</body>
</html>
Kết quả:
Giải thích:
Đoạn code này sẽ dùng thuộc tính postition absolute, khi đặt top 10px nó sẽ lùi xuống 10px mà không để lại khoảng trống.
Bạn sẽ dùng 2 giá trị là top và left để căn chỉnh vị trí. Thêm left: 50px để xem kết quả có gì thay đổi không.
2. Chèn chữ lên background
Đối với background để lồng hình vào chữ cũng tương tự bạn cũng dùng Position relative
<!DOCTYPE html>
<html>
<head>
<style>
.content {
height: 400px;
width: 100%;
background-image:url(https://quynhweb.pro/wp-content/uploads/2019/12/Quachquynh.com__background-dep-cho-may-tinh-laptop-va-pc-7.jpg) ;
background-size: cover
}
.text {
color: #fff;
position: absolute;
top: 10px;
left: 70px;
}
</style>
</head>
<body>
<div class="content">
<h1 class="text">Đây là đoạn văn bản chèn chữ lên ảnh</h1>
</div>
</body>
</html>
Khá đơn giản phải không! Đây là một phần kiến thức cần biết trong CSS để thiết kế giao diện web. Hãy bắt tay vào thực hành ngay sau khi đọc xong bài viết này nhé!
