Một trong những câu hỏi CSS phổ biến nhất mà tôi nhận được là sự khác biệt giữa màu nền và màu nền trong CSS là gì? Lý do khiến bạn khó hiểu là bạn thường thấy các nhà phát triển sử dụng background-color và background có thể thay thế cho nhau khi chúng áp dụng màu nền cho một phần tử.
Nhưng chúng không giống nhau. background (không-màu) thuộc tính can được sử dụng để đặt tất cả các thuộc tính nền cho một phần tử trong một khai báo. Ví dụ:bạn có thể muốn thêm cả màu nền, hình ảnh được hiển thị một lần (không lặp lại) và vị trí hình ảnh vào một phần tử trong một khai báo duy nhất, như sau:
background: #444 url("image.jpg) no-repeat left top;Phần trên cũng có thể được viết như vậy:
background-image: url(“url/image.jpg”);
background-repeat: no-repeat;
background-position-x: left;
background-position-y: top;
background-color: #444;
Vì vậy, background Thuộc tính có thể được sử dụng như một tài liệu ngắn tiện lợi có thể áp dụng nhiều khai báo trong một dòng và tiết kiệm cho bạn nhiều dòng mã.
Khai báo =thuộc tính CSS + giá trị.
background-color mặt khác, thuộc tính chỉ có thể đặt nền màu của một phần tử. Nó giống như một tập hợp con (một phần) của background lớn hơn tài sản.
Quan trọng:thuộc tính background sẽ đặt lại tất cả các khai báo trước đó - hãy cẩn thận !
Nếu trước đây bạn đã áp dụng các khai báo nền khác nhau trên một phần tử, ví dụ:background-color hoặc background-image và sau đó thêm background: red khai báo cho cùng một phần tử, tất cả các khai báo trước đó của bạn sẽ được đặt lại và bây giờ nền của phần tử của bạn có màu đỏ và hình nền của bạn không còn nữa.
Ví dụ
Hãy xem ví dụ về Pen này, trong đó chúng ta có ba div các phần tử có cùng .box lớp. Phần tử đầu tiên chỉ có .box nhưng những lớp khác cũng có lớp tiện ích (trợ giúp) là .bg-red và .bg-blue tương ứng.
Ví dụ về Se CodePen.
Nhận thấy sự khác biệt?
Hộp thứ hai toàn màu đỏ, không có hình ảnh, mặc dù .box của nó chỉ định rõ ràng rằng nó phải có cùng hình ảnh JS với hai phần tử 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 xem kỹ CSS và so sánh .bg-red và .bg-blue tính chất. Lớp màu đỏ sử dụng nền background thuộc tính để đặt giá trị màu đỏ, trong khi lớp màu xanh lam sử dụng background-color mục đích duy nhất .
background thuộc tính trên .bg-red lớp chỉ cần xóa mọi khai báo nền khác trên phần tử div thứ hai:here -image , -repeat , -color và sau đó thêm red được chỉ định giá trị 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 đảm bảo bạn sử dụng background-color , không background hoặc bạn sẽ ghi đè lên bất kỳ khai báo nền nào trước đó trên phần tử đó.
Đôi khi, đang đặt lại tất cả các khai báo trước đó có thể là chính xác những gì bạn muốn làm. Bạn có thể đang làm việc trên một trang web có một loạt mã kế thừa mà bạn không được phép chạm vào (hoặc muốn haha) nhưng bạn muốn thao tác một phần tử cụ thể đã có một loạt các khai báo mà bạn cần thay thế bằng mới số ít giá trị khai báo, ví dụ:color - cho điều đó, sử dụng background là một công cụ tuyệt vời.