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ả:
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ư 400 và 700.
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é!
