Thuộc tính background-color trong CSS
Bùi Tấn Lực - 1003
- 03/10/2025
Chức năng của Thuộc tính background-color trong CSS
Thuộc tính background-color trong CSS dùng để quy định màu nền cho phần tử HTML, có nhiều cách quy định màu nền.
Code Thuộc tính background-color trong CSS
background-color:red;
background-color:#92a8d1;
background-color:rgb(201, 76, 76);
background-color:rgba(201, 76, 76, 0.3);
background-color:hsl(89, 43%, 51%);
background-color:hsla(89, 43%, 51%, 0.3);
<!DOCTYPE html>
<html>
<head>
<title>Code Thuộc tính background-color trong CSS</title>
<style>
p{margin-bottom:10px}
</style>
</head>
<body>
<h1>Code Thuộc tính background-color trong CSS</h1>
<p style="background-color:red;color:#fff">background-color:red;</p>
<p style="background-color:#92a8d1;color:#000">background-color:#92a8d1;</p>
<p style="background-color:rgb(201, 76, 76);color:#fff">background-color:rgb(201, 76, 76);</p>
<p style="background-color:rgba(201, 76, 76, 0.3);color:#000">background-color:rgba(201, 76, 76, 0.3);</p>
<p style="background-color:hsl(89, 43%, 51%);color:#000">background-color:hsl(89, 43%, 51%);</p>
<p style="background-color:hsla(89, 43%, 51%, 0.3);color:#000">background-color:hsla(89, 43%, 51%, 0.3);</p>
</body>
</html>
Các lỗi thường gặp khi sử dụng background-color trong CSS
Trong thực tế, background-color có thể không cho kết quả như mong đợi dù cú pháp CSS không sai. Nguyên nhân thường nằm ở phạm vi phần tử, thứ tự áp dụng CSS hoặc cách các lớp nền chồng lên nhau.
Vì sao background-color không hiển thị như mong muốn?
Một nguyên nhân phổ biến là thuộc tính đã được khai báo nhưng bị một quy tắc CSS khác ghi đè. Trường hợp này thường xảy ra khi phần tử có nhiều class hoặc stylesheet được áp dụng theo thứ tự khác nhau.
Ngoài ra, phần tử có thể đang sử dụng nền trong suốt hoặc nội dung bên trong có kích thước và nền riêng, khiến màu của phần tử cha không dễ nhận thấy. Khi kiểm tra lỗi, nên dùng công cụ dành cho nhà phát triển của trình duyệt để xác định chính xác quy tắc background-color nào đang được áp dụng.
Cách xử lý khi màu nền bị phần tử con che phủ
Nếu phần tử cha đã có màu nền nhưng phần hiển thị bên trong lại mang một màu khác, hãy kiểm tra các phần tử con. Một phần tử con có background-color riêng sẽ che khuất vùng nền tương ứng của phần tử cha.
Cách xử lý là xác định phần tử thực sự cần hiển thị màu nền, sau đó đặt thuộc tính tại đúng cấp phần tử. Nếu muốn màu nền của phần tử cha nhìn thấy qua phần tử con, có thể dùng màu trong suốt cho phần tử con khi phù hợp.
Lời kết
Cảm ơn các bạn đã tham khảo bài viết Thuộc tính background-color trong CSS.
- 0 Bình luận
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *
