การใช้ Background กับ Background-Color ใน CSS สำคัญไหม? (ใช่)

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

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

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 คุณสมบัติสามารถใช้เป็นตัวย่อที่สะดวกซึ่งสามารถใช้การประกาศหลายรายการในบรรทัดเดียวและช่วยให้คุณประหยัดโค้ดได้หลายบรรทัด

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

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

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

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

ตัวอย่าง

ดูตัวอย่าง Pen นี้ ซึ่งเรามี div . สามตัว องค์ประกอบที่มี .box . เหมือนกัน ระดับ. องค์ประกอบแรกมีเพียง .box คลาส แต่คลาสอื่นก็มีคลาสยูทิลิตี้ (ตัวช่วย) ของ .bg-red และ .bg-blue ตามลำดับ

ดูตัวอย่าง CodePen

สังเกตเห็นความแตกต่าง?

ช่องที่ 2 เป็นสีแดงทั้งหมด ไม่มีภาพ แม้ว่าจะเป็น .box class ระบุอย่างชัดเจนว่าควรมีอิมเมจ 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 คุณสมบัติ. คลาสสีแดงใช้ 'master' (all-in-one) background คุณสมบัติเพื่อตั้งค่าสีแดง ในขณะที่คลาสสีน้ำเงินใช้ background-color . วัตถุประสงค์เดียว .

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

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

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