1.1 Thuộc tính background-color
Thuộc tính background-color đặt màu nền cho một phần tử. Nó cho phép thiết lập màu nền, cung cấp sự phân tách nội dung rõ ràng và cải thiện nhận thức của văn bản và các phần tử khác.
Giá trị:
- Tên màu sắc: có thể sử dụng tên màu sắc đã định sẵn như
red,blue,green - Giá trị hexadecimal: ví dụ,
#ff0000,#00ff00,#0000ff - RGB: ví dụ,
rgb(255, 0, 0),rgb(0, 255, 0),rgb(0, 0, 255) - RGBA: ví dụ,
rgba(255, 0, 0, 0.5)(đỏ bán trong suốt) - HSL: ví dụ,
hsl(0, 100%, 50%),hsl(120, 100%, 50%),hsl(240, 100%, 50%) - HSLA: ví dụ,
hsla(0, 100%, 50%, 0.5)(đỏ bán trong suốt).
Ví dụ sử dụng:
.color-red {
background-color: red;
}
.color-hex {
background-color: #3498db;
}
.color-rgba {
background-color: rgba(46, 204, 113, 0.7);
}
<body>
<div class="color-red">Phần tử này có nền màu đỏ.</div>
<div class="color-hex">Phần tử này có nền với màu định dạng hexadecimal.</div>
<div class="color-rgba">Phần tử này có nền màu xanh lá bán trong suốt.</div>
</body>
Giải thích mã:
background-color: red;: đặt nền màu đỏ cho phần tửbackground-color: #3498db;: đặt màu nền bằng giá trị hexadecimalbackground-color: rgba(46, 204, 113, 0.7);: đặt nền màu xanh lá bán trong suốt bằng RGBA
1.2 Thuộc tính background-image
Thuộc tính background-image đặt hình nền cho một phần tử. Nó cho phép sử dụng hình ảnh để tạo nền hấp dẫn về mặt thị giác, cải thiện thiết kế và cảm nhận của trang web.
Để sử dụng, cần truyền URL của hình ảnh — chỉ định đường dẫn đến hình ảnh sẽ được sử dụng làm nền. Ví dụ, url('image.jpg').
Ví dụ sử dụng:
.background-url {
background-image: url('https://via.placeholder.com/150');
width: 150px;
height: 150px;
border: 1px solid #000;
}
<body>
<div class="background-url">Phần tử này có hình nền.</div>
</body>
Giải thích mã:
background-image: url('https://via.placeholder.com/150');: đặt hình ảnh làm nền cho phần tử. Trong trường hợp này sử dụng URL của hình ảnh
Lợi ích của việc sử dụng background-image:
- Hấp dẫn thị giác: sử dụng hình nền cho phép tạo các trang web hấp dẫn và thú vị hơn về mặt thị giác.
- Bối cảnh: hình nền có thể cung cấp bối cảnh thêm hoặc thông tin, làm nổi bật sự nhận diện của nội dung trên trang.
- Thương hiệu: hình nền có thể là một phần của thương hiệu, giúp duy trì phong cách và sự nhận diện đồng nhất trên trang web.
Lời khuyên khi sử dụng hình nền:
- Tối ưu hóa hình ảnh: để cải thiện hiệu suất của trang, quan trọng là tối ưu hóa hình ảnh, giảm kích thước mà không làm giảm chất lượng quá nhiều
- Hỗ trợ đa trình duyệt: đảm bảo rằng hình ảnh sử dụng hiển thị chính xác trên tất cả các trình duyệt mục tiêu
- Văn bản thay thế: đối với những hình ảnh quan trọng, nên có cách thức thay thế để truyền tải thông tin, chẳng hạn như mô tả văn bản, cho người dùng có nhu cầu đặc biệt
1.3 Sử dụng cả background-color và background-image
Các thuộc tính background-color và background-image có thể sử dụng cùng nhau để tạo ra những nền phức tạp và hấp dẫn. Ví dụ, có thể đặt màu nền sẽ hiển thị nếu hình nền không tải được, hoặc sử dụng nền màu kết hợp với hình ảnh bán trong suốt.
Ví dụ sử dụng:
.combined-background {
background-color: #3498db;
background-image: url('https://via.placeholder.com/150');
width: 300px;
height: 300px;
color: white;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
border: 1px solid #000;
}
<body>
<div class="combined-background">
Phần tử này có nền kết hợp giữa hình ảnh và màu sắc.
</div>
</body>
Giải thích mã:
background-color: #3498db;: đặt màu nềnbackground-image: url('https://via.placeholder.com/150');: đặt hình nềnwidth: 300px;height: 300px;: đặt kích thước của phần tửcolor: white;: đặt màu văn bản để dễ đọc hơn trên nềndisplay: flex;align-items: center;justify-content: center;text-align: center;: căn giữa văn bản trong phần tửborder: 1px solid #000;: thêm viền quanh phần tử để làm nổi bật
GO TO FULL VERSION