Một trong những câu hỏi CSS phổ biến nhất là sự khác biệt giữa background và background-color trong CSS là gì? Lý do gây nhầm lẫn là bạn thường thấy các nhà phát triển sử dụng background-color và background thay thế cho nhau khi áp dụng màu nền cho một phần tử.
Nhưng chúng không giống nhau. Thuộc tính background (không có -color) có thể được dùng để thiết lập tất cả các thuộc tính nền cho một phần tử trong một khai báo duy nhất. Ví dụ, bạn có thể muốn thêm cả màu nền, một hình ảnh hiển thị một lần (no-repeat), và vị trí hình ảnh cho một phần tử trong một dòng khai báo, như sau:
background: #444 url("image.jpg") no-repeat left top;Đoạn mã trên cũng có thể viết như sau:
background-image: url("url/image.jpg"); background-repeat: no-repeat; background-position-x: left; background-position-y: top; background-color: #444;Vậy thuộc tính background có thể dùng như một shorthand tiện lợi áp dụng nhiều khai báo trong một dòng, giúp tiết kiệm nhiều dòng mã.
Khai báo = Thuộc tính CSS + giá trị.
Thuộc tính background-color, ngược lại, chỉ có thể thiết lập màu nền của phần tử. Nó giống như một tập con (một phần) của thuộc tính background lớn hơn.
Quan trọng: Thuộc tính background sẽ reset tất cả các khai báo trước đó — hãy cẩn thận!
Nếu bạn đã áp dụng trước đó nhiều khai báo nền cho một phần tử, ví dụ background-color hoặc background-image, sau đó thêm khai báo background: red cho cùng phần tử đó, tất cả các khai báo trước đó sẽ bị reset, và bây giờ nền phần tử chỉ còn màu đỏ, hình ảnh nền đã biến mất.
Ví dụ
Xem ví dụ CodePen dưới đây, có ba phần tử div với cùng class .box. Phần tử đầu tiên chỉ có class .box, hai phần tử còn lại cũng có thêm class tiện ích (helper) là .bg-red và .bg-blue tương ứng.
Bạn nhận thấy sự khác biệt?
Hộp thứ hai hoàn toàn màu đỏ, không có hình ảnh, mặc dù class .box của nó rõ ràng chỉ định phải có cùng hình ảnh JS như hai hộp khác.
HTML
<div class="box"> </div> <div class="box bg-red"> </div> <div class="box bg-blue"> </div>CSS
.box { margin: 1rem; height: 100px; width: 150px; background-color: black; background-image: url("https://techstacker.com/static/placeholder-thumbnail-javascript-322632ee75bc4a676b0b067b31eaf969.svg"); background-repeat: no-repeat; } .bg-red { background: red; } .bg-blue { background-color: blue; }Hãy nhìn kỹ CSS, so sánh thuộc tính của .bg-red và .bg-blue. Class đỏ sử dụng thuộc tính 'master' (all-in-one) background để đặt giá trị màu đỏ, trong khi class xanh dùng background-color đơn lẻ.
Thuộc tính background trên class .bg-red đơn giản xóa bỏ mọi khai báo nền khác trên div thứ hai: background-image, background-repeat, background-color và sau đó thêm giá trị red làm thuộc tính nền duy nhất cho phần tử đó.
Vì vậy, nếu bạn chỉ muốn ảnh hưởng đến màu nền của các phần tử cụ thể, hãy chắc chắn dùng background-color, không phải background, nếu không bạn sẽ ghi đè bất kỳ khai báo background- trước đó trên phần tử đó.
Đôi khi, reset tất cả các khai báo trước đó chính xác là điều bạn muốn. Bạn có thể đang làm việc trên một trang web có nhiều mã kế thừa (legacy code) mà bạn không được phép sửa (hoặc không muốn), nhưng bạn muốn thao tác một phần tử cụ thể đã có nhiều khai báo cần thay thế bằng một giá trị khai báo đơn lẻ mới, ví dụ màu — lúc này dùng background là công cụ tuyệt vời.