background: none vs background: transparent ความแตกต่างคืออะไร?

มีความแตกต่างระหว่างคุณสมบัติ CSS ทั้งสองนี้หรือไม่:

background: none;
background: transparent;

1. ทั้งคู่ใช้ได้หรือไม่
2. ควรใช้ตัวไหนและทำไม?

ไม่มีความแตกต่างระหว่างพวกเขา

หากคุณไม่ได้ระบุค่าสำหรับคุณสมบัติครึ่งโหลใด ๆ ที่backgroundเป็นชวเลขสำหรับคุณสมบัตินั้นจะถูกตั้งเป็นค่าเริ่มต้น noneและtransparentเป็นค่าเริ่มต้น

หนึ่งอย่างชัดเจนชุดbackground-imageไปnoneและโดยปริยายชุดไปbackground-color transparentอีกทางหนึ่งก็เป็นอีกทางหนึ่ง

เป็นข้อมูลเชิง aditional เกี่ยวกับคำตอบ@Quentinและอย่างที่เขาพูดถูกต้อง backgroundคุณสมบัติ CSS นั้นเป็นชวเลขสำหรับ:

background-color
background-image
background-repeat
background-attachment
background-position

นั่นหมายความว่าคุณสามารถจัดกลุ่มสไตล์ทั้งหมดในรูปแบบเดียวเช่น:

background: red url(../img.jpg) 0 0 no-repeat fixed;

นี่จะเป็น (ในตัวอย่างนี้):

background-color: red;
background-image: url(../img.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;

ดังนั้น ... เมื่อคุณตั้งค่า: background:none;
คุณกำลังบอกว่าคุณสมบัติพื้นหลังทั้งหมดถูกตั้งค่าเป็นไม่มี ...
คุณกำลังพูดแบบนั้นbackground-image: none;และอื่น ๆ ทั้งหมดเป็นinitialสถานะ (เนื่องจากไม่ได้รับการประกาศ)
ดังนั้นbackground:none;คือ:

background-color: initial;
background-image: none;
background-repeat: initial;
background-attachment: initial;
background-position: initial;

ตอนนี้เมื่อคุณกำหนดเฉพาะสี (ในกรณีของคุณtransparent) โดยพื้นฐานแล้วคุณจะพูดว่า:

background-color: transparent;
background-image: initial;
background-repeat: initial;
background-attachment: initial;
background-position: initial;

ฉันทำซ้ำเป็น @Quentin ถูกต้องกล่าวว่าdefault transparentและnoneค่าในกรณีนี้เหมือนกันดังนั้นในตัวอย่างของคุณและสำหรับคำถามเดิมของคุณไม่มีมีความแตกต่างระหว่างพวกเขา

แต่! .. ถ้าคุณพูดว่าbackground:noneVs background:redแล้วใช่ ... มีความแตกต่างกันมากอย่างที่ฉันพูดคนแรกจะตั้งค่าคุณสมบัติทั้งหมดเป็นnone/defaultและอันที่สองจะเปลี่ยนเฉพาะcolorส่วนที่เหลือและยังคงอยู่ในdefaultสถานะของเขา

โดยสรุป:

คำตอบสั้น ๆ : ไม่ไม่มีความแตกต่างเลย (ในตัวอย่างและคำถามเดิมของคุณ)
คำตอบแบบยาว : ใช่มีความแตกต่างอย่างมาก แต่ขึ้นอยู่กับคุณสมบัติที่มอบให้กับแอตทริบิวต์โดยตรง

Upd1: ค่าเริ่มต้น (aka default)

ค่าเริ่มต้นของการต่อกันของค่าเริ่มต้นของคุณสมบัติ longhand:

background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
background-clip: border-box
background-color: transparent

ดูbackgroundคำอธิบายเพิ่มเติมที่นี่

Upd2 ชี้แจงดีกว่าbackground:none;สเปค

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

background: initial;