CSS: ความแตกต่างระหว่าง background และ background-color (และทำไมจึงสำคัญ)

คำถามเกี่ยวกับ CSS ที่พบบ่อยที่สุดคือ "background และ background-color แตกต่างกันอย่างไร?" สาเหตุที่ทำให้สับสนคือมักเห็นนักพัฒนาใช้ background-color และ background สลับกันใช้เมื่อต้องการกำหนดสีพื้นหลังให้กับอีเลเมนต์

แต่จริงๆ แล้วทั้งสองไม่ได้เหมือนกัน คุณสมบัติ background (โดยไม่มี -color) สามารถ ใช้กำหนดคุณสมบัติพื้นหลัง ทั้งหมด ของอีเลเมนต์ในบรรทัดเดียวได้ ตัวอย่างเช่น คุณอาจต้องการเพิ่มสีพื้นหลัง รูปภาพที่แสดงเพียงครั้งเดียว (no-repeat) และตำแหน่งของรูปภาพ ให้กับอีเลเมนต์ในคำประกาศเดียว ดังนี้:

background: #444 url("image.jpg") no-repeat left top;

โค้ดด้านบนเทียบเท่ากับการเขียนแยกบรรทัดดังนี้:

background-image: url("url/image.jpg");
background-repeat: no-repeat;
background-position-x: left;
background-position-y: top;
background-color: #444;

ดังนั้น คุณสมบัติ background จึงเป็น shorthand ที่สะดวกสำหรับรวมหลายคำประกาศในบรรทัดเดียว ช่วยลดโค้ดได้มาก

คำประกาศ (Declaration) = คุณสมบัติ CSS + ค่า

ในทางกลับกัน คุณสมบัติ background-color สามารถกำหนดได้แค่ สีพื้นหลัง ของอีเลเมนต์เท่านั้น มันเป็นเพียงส่วนย่อย (subset) ของคุณสมบัติ background ที่ใหญ่กว่า

สำคัญ: คุณสมบัติ background จะรีเซ็ตคำประกาศก่อนหน้าทั้งหมด — ต้องระวัง!

หากคุณเคยกำหนดคุณสมบัติพื้นหลังต่างๆ ให้กับอีเลเมนต์ไว้ก่อนหน้านี้ เช่น background-color หรือ background-image แล้วภายหลังเพิ่มคำประกาศ background: red ให้กับอีเลเมนต์เดียวกัน คำประกาศก่อนหน้าทั้งหมดจะถูกรีเซ็ต และพื้นหลังของอีเลเมนต์จะกลายเป็นสีแดง ในขณะที่รูปภาพพื้นหลังจะหายไป

ตัวอย่าง

ดูตัวอย่างใน CodePen นี้ ซึ่งมี 3 อีเลเมนต์ div ที่มีคลาส .box เหมือนกัน อีเลเมนต์แรกมีแค่คลาส .box ส่วนอีกสองอันมีคลาสเสริมคือ .bg-red และ .bg-blue ตามลำดับ

ลองสังเกตความแตกต่าง

กล่องที่สองเป็นสีแดงทั้งหมด ไม่มีรูปภาพ แม้ว่าคลาส .box จะระบุชัดเจนว่าควรมีรูปภาพ JS เหมือนกับอีกสองกล่อง

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; }

สังเกต CSS อย่างละเอียด เปรียบเทียบคุณสมบัติของ .bg-red และ .bg-blue คลาสสีแดงใช้คุณสมบัติ background (แบบ all-in-one) กำหนดค่าสีแดง ส่วนคลาสสีน้ำเงินใช้ background-color ที่มีหน้าที่เฉพาะเจาะจง

คุณสมบัติ background บนคลาส .bg-red จะลบคำประกาศพื้นหลังอื่นๆ ทั้งหมดบน div ตัวที่สอง: background-image, background-repeat, background-color แล้วเพิ่มค่า red เป็นคุณสมบัติพื้นหลังเพียงอย่างเดียวของอีเลเมนต์นั้น

ดังนั้น หากคุณต้องการเปลี่ยนแปลงเฉพาะสีพื้นหลังของอีเลเมนต์บางอัน ให้ใช้ background-color เท่านั้น อย่าใช้ background มิฉะนั้นคุณจะเขียนทับคำประกาศ background- ทั้งหมดที่มีอยู่บนอีเลเมนต์นั้น

บางครั้ง การ รีเซ็ต คำประกาศก่อนหน้าทั้งหมดอาจเป็นสิ่งที่คุณต้องการจริงๆ เช่น เมื่อทำงานกับเว็บไซต์ที่มีโค้ดเก่า (legacy code) ที่คุณไม่ได้รับอนุญาตให้แก้ไข (หรือไม่ต้องการแก้) แต่ต้องการจัดการอีเลเมนต์เฉพาะที่มีคำประกาศมากมายซึ่งคุณต้องการแทนที่ด้วยค่าเดี่ยวใหม่ เช่น สี — ในกรณีนี้ การใช้ background เป็นเครื่องมือที่ยอดเยี่ยม