Viết chữ đè lên ảnh trong HTML

Giới Thiệu

Trong thiết kế web, việc viết chữ đè lên ảnh là một kỹ thuật quan trọng giúp tăng tính thẩm mỹ và truyền đạt thông tin cho người dùng một cách hiệu quả. Kỹ thuật này giúp cho những hình ảnh được sử dụng trên trang web trở nên độc đáo và thu hút sự chú ý của người dùng.

Việc viết chữ đè lên ảnh còn giúp cho những thông tin cần thiết trở nên rõ ràng hơn. Với việc chèn chữ lên ảnh, người dùng có thể nhanh chóng nhận được thông tin mà không cần phải đọc qua nhiều đoạn văn bản. Điều này đặc biệt quan trọng trong trường hợp trang web cần truyền tải thông tin một cách nhanh chóng và hiệu quả.

Có 2 trường hợp xảy ra ở đây

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://quachquynh.com/wp-content/uploads/2019/12/Quachquynh.com__background-dep-cho-may-tinh-laptop-va-pc-7.jpg" width="100%"/>

</body>
</html>

Kết quả:

Cách chèn chữ lên ảnh

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.

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://quachquynh.com/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>

Tùy chỉnh văn bản trong HTML

font-size, font-weight và color

font-size: Thuộc tính này giúp điều chỉnh kích thước của văn bản.
Bạn có thể sử dụng các đơn vị như px, em, rem, và %.
Ví dụ: font-size: 16px;

font-weight: Được sử dụng để thay đổi độ đậm của văn bản.
Các giá trị thường gặp như normal, bold hoặc giá trị số như 400700.
Ví dụ: font-weight: bold;

color: Thiết lập màu sắc cho văn bản.
Có thể sử dụng mã màu hex, rgb, rgba, hoặc tên màu.
Ví dụ: color: #ff0000;

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é!

Related Posts

Cách sử dụng đường dẫn tương đối trong HTML

Cách sử dụng đường dẫn tương đối trong HTML

Trang web hiện đại thường bao gồm nhiều tài nguyên như hình ảnh, trang HTML khác, tệp tin CSS và JavaScript. Để liên kết và truy cập…

javascript

Cách gọi hàm JavaScript trong HTML

Hàm (Functions) trong JavaScript nếu không gọi đến nó sẽ không thực thi chức năng. Vì thế để thực hiện một nhiệm vụ nào đó ở trong…

Mẫu Form đăng nhập HTML và CSS đẹp mắt

Trong một số bài viết trên blog này mình đã chia sẻ về cách tạo một Form đăng nhập đơn giản. Nhưng để có một Form đẹp…

form-lien-he-4

Hướng dẫn tạo form liên hệ bằng HTML, CSS

Form liên hệ là một chức năng không thể thiếu cho blog, website. Thông qua Form độc giả, khách hàng có thể yêu cầu admin trợ giúp…

hoc-html1

Thẻ a trong HTML – Thẻ tạo link liên kết trong HTML

Một trong các thẻ thường được sử dụng khi xây dựng website bằng HTML đó là thẻ a. Nó có vai trò quan trọng đối với người…

Tổng hợp các thẻ cơ bản trong HTML

Các thẻ cơ bản trong HTML thường sử dụng

HTML là ngôn ngữ tạo khung xương cho trang web với cú pháp tương đối dễ dàng. Hầu như ai cũng có thể học HTML trong vài…