ความแตกต่างระหว่างพื้นหลังและสีพื้นหลังคืออะไร

อะไรคือความแตกต่างระหว่างการระบุสีพื้นหลังโดยใช้backgroundและbackground-color?

ตัวอย่าง # 1

body { background-color: blue; }

ตัวอย่าง # 2

body { background: blue; }

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

พื้นหลังสี
พื้นหลังภาพ
พื้นหลังตำแหน่ง
พื้นหลังซ้ำ
พื้นหลังแนบ
พื้นหลังคลิป
พื้นหลังแหล่งกำเนิด
ขนาดพื้นหลัง

ดังนั้นนอกจากการbackground-colorใช้backgroundทางลัดคุณสามารถเพิ่มค่าหนึ่งค่าหรือมากกว่าโดยไม่ต้องทำซ้ำ background-*คุณสมบัติอื่นมากกว่าหนึ่งครั้ง

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

backgroundจะสามารถหักล้างก่อนหน้านี้ทั้งหมดbackground-color, background-imageรายละเอียดอื่น ๆ มันเป็นการจดชวเลข แต่เป็นการรีเซ็ตเช่นกัน

บางครั้งฉันจะใช้เพื่อเขียนทับbackgroundข้อกำหนดก่อนหน้านี้ในการปรับแต่งเทมเพลตซึ่งฉันต้องการสิ่งต่อไปนี้:

background: white url(images/image1.jpg) top left repeat;

เป็นดังต่อไปนี้:

background: black;

ดังนั้นทุกพารามิเตอร์ ( background-image, background-position, background-repeat) จะตั้งค่าเริ่มต้นของพวกเขา

เกี่ยวกับประสิทธิภาพของ CSS :

backgroundvs background-color:

เปรียบเทียบ 18 สี swatches แสดงผล 100 ครั้งบนหน้าเว็บเป็นรูปสี่เหลี่ยมขนาดเล็กครั้งเดียวกับพื้นหลังและครั้งเดียวกับสีพื้นหลัง

ในขณะที่ตัวเลขเหล่านี้มาจากการโหลดซ้ำหน้าเดียวด้วยการรีเฟรชครั้งต่อมาเวลาการเรนเดอร์ก็เปลี่ยนไป แต่ความแตกต่างเปอร์เซ็นต์ก็เหมือนกันทุกครั้ง

นั่นคือการประหยัดเกือบ 42.6ms เกือบสองเท่าเร็วเมื่อใช้พื้นหลังแทนสีพื้นหลังใน Safari 7.0.1 Chrome 33 ดูเหมือนจะใกล้เคียงกัน

สิ่งนี้ทำให้ฉันหมดความซื่อสัตย์เพราะเป็นเวลาที่ยาวนานที่สุดด้วยเหตุผลสองประการ:

• ฉันมักจะเถียงเพื่อชัดเจนในคุณสมบัติ CSS โดยเฉพาะอย่างยิ่งกับพื้นหลังเพราะมันอาจส่งผลกระทบต่อความเป็นพิเศษลงที่ถนน
• ผมคิดว่าเมื่อเบราว์เซอร์ที่เห็นพวกเขาจริงๆเห็นbackground: #000; background: #000 none no-repeat top center;ฉันไม่มีลิงก์ไปยังแหล่งข้อมูลที่นี่ แต่ฉันจำได้ว่าอ่านสิ่งนี้ที่ใดที่หนึ่ง

Ref: https://github.com/mdo/css-perf#background-vs-background-color

ด้วยbackgroundคุณสามารถตั้งค่าbackgroundคุณสมบัติทั้งหมดเช่น:

• background-color
• background-image
  
• background-repeat
  
• background-position
  เป็นต้น

ด้วยbackground-colorคุณสามารถระบุสีของพื้นหลังได้

background: url(example.jpg) no-repeat center center #fff;

VS.

background-image: url(example.jpg);
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;

ข้อมูลเพิ่มเติม

(ดูคำอธิบายภาพ: พื้นหลัง - คุณสมบัติชวเลข)

หนึ่งในความแตกต่าง:

หากคุณใช้รูปภาพเป็นพื้นหลังด้วยวิธีนี้:

background: url('Image Path') no-repeat;

จากนั้นคุณจะไม่สามารถแทนที่ได้ด้วยคุณสมบัติ "พื้นหลังสี"

แต่ถ้าคุณใช้พื้นหลังเพื่อใช้สีมันก็เหมือนกับสีพื้นหลังและสามารถทับได้

เช่น: http://jsfiddle.net/Z57Za/11/และhttp://jsfiddle.net/Z57Za/12/

พวกเขาทั้งคู่เหมือนกัน มีตัวเลือกพื้นหลังหลาย (เช่นbackground-color, background-image, background-position) และคุณสามารถเข้าถึงได้ทั้งผ่านง่ายbackgroundเลือกหรือหนึ่งเฉพาะเจาะจงมากขึ้น ตัวอย่างเช่น:

background: blue url(/myImage.jpg) no-repeat;

หรือ

background-color: blue;
background-image: url(/myImage.jpg);
background-repeat: no-repeat;

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

นี่ไม่ได้หมายความว่ามันจะแทนที่การตั้งค่าอื่น ๆ สำหรับคุณสมบัติเหล่านั้น สิ่งนี้ขึ้นอยู่กับการเรียงซ้อนตามกฎปกติที่มักเข้าใจผิด

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

ไม่มีความแตกต่าง ทั้งสองจะทำงานในลักษณะเดียวกัน

คุณสมบัติพื้นหลัง CSS ใช้เพื่อกำหนดเอฟเฟกต์พื้นหลังขององค์ประกอบ

คุณสมบัติ CSS ที่ใช้สำหรับเอฟเฟ็กต์พื้นหลัง:

• สีพื้นหลัง
• ภาพพื้นหลัง
• พื้นหลังซ้ำ
• พื้นหลังแนบ
• พื้นหลังตำแหน่ง

คุณสมบัติพื้นหลังประกอบด้วยคุณสมบัติทั้งหมดนี้และคุณสามารถเขียนได้ในหนึ่งบรรทัด

นี่คือคำตอบที่ดีที่สุด ชวเลข (พื้นหลัง) มีไว้สำหรับรีเซ็ตและ DRY (รวมกับ longhand)

การเปรียบเทียบแถบสี 18 สีที่เรนเดอร์ 100 ครั้งบนหน้ากระดาษเป็นสี่เหลี่ยมเล็ก ๆ หนึ่งครั้งมีพื้นหลังและอีกหนึ่งครั้งเป็นสีพื้นหลัง

ฉันได้สร้างการทดสอบประสิทธิภาพของ CSSขึ้นใหม่และผลลัพธ์ที่ได้มีความแตกต่างกันอย่างมากในปัจจุบัน

background

Chrome 54 : 443 (µs / div)

Firefox 49 : 162 (/s / div)

ขอบ 10 : 56 (µs / div)

background-color

Chrome 54 : 449 (/s / div)

Firefox 49 : 171 (/s / div)

ขอบ 10 : 58 (µs / div)

อย่างที่คุณเห็น - แทบไม่มีความแตกต่าง

backgroundเป็นทางลัดสำหรับbackground-colorและพื้นหลังอื่น ๆ ที่เกี่ยวข้องกับสิ่งต่าง ๆ ดังนี้

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

อ่านข้อความด้านล่างจาก W3C:

พื้นหลัง - คุณสมบัติชวเลข

ในการย่อรหัสคุณสามารถระบุคุณสมบัติพื้นหลังทั้งหมดในคุณสมบัติเดียวได้ สิ่งนี้เรียกว่าคุณสมบัติจดชวเลข

คุณสมบัติชวเลขสำหรับพื้นหลังเป็นพื้นหลัง:

body {
  background: white url("img_tree.png") no-repeat right top;
}

เมื่อใช้คุณสมบัติชวเลขลำดับของค่าคุณสมบัติคือ:

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

มันไม่สำคัญว่าหนึ่งในค่าคุณสมบัติจะหายไปตราบใดที่ค่าอื่นอยู่ในลำดับนี้

ฉันพบว่าคุณไม่สามารถตั้งค่าการไล่ระดับสีด้วยสีพื้นหลังได้

งานนี้:

background:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

สิ่งนี้ไม่:

background-color:linear-gradient(to right, rgba(255,0,0,0), rgba(255,255,255,1));

background เป็นคุณสมบัติจดชวเลขสำหรับต่อไปนี้:

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

คุณสามารถดูข้อมูลโดยละเอียดเกี่ยวกับอสังหาริมทรัพย์ได้ที่นี่

ลำดับคุณสมบัติ

ในการใช้งานเบราว์เซอร์ส่วนใหญ่ (ฉันคิดว่าเบราว์เซอร์ที่เก่ากว่าอาจมีปัญหา) ลำดับของคุณสมบัติไม่สำคัญยกเว้น:

• background-originและbackground-clipเมื่อทั้งสองของคุณสมบัตินี้มีอยู่คนแรกอ้างถึงและครั้งที่สองไป-origin-clip

  ตัวอย่าง:

  background: content-box green padding-box;

  เทียบเท่ากับ:

  background-origin: content-box;
  background-color: green;
  background-clip: padding-box;

• background-sizeต้องปฏิบัติตามเสมอbackground-positionและคุณสมบัติต้องถูกคั่นด้วย/

• หากbackground-positionประกอบด้วยตัวเลขสองตัวค่าแรกคือค่าแนวนอนและค่าแนวตั้งที่สอง

ฉันสังเกตเห็นเมื่อสร้างอีเมลสำหรับ Outlook ...

/*works*/
background: gray;

/*does not work*/
background-color: gray;

คุณสามารถทำสิ่งที่ประณีตเรียบร้อยเมื่อคุณเข้าใจว่าคุณสามารถเล่นกับมรดกนี้ อย่างไรก็ตามก่อนอื่นให้ทำความเข้าใจบางสิ่งจากเอกสารนี้บนพื้นหลัง:

ด้วย CSS3 คุณสามารถใช้พื้นหลังหลาย ๆ กับองค์ประกอบ เหล่านี้จะอยู่ในชั้นบนซึ่งกันและกันด้วยพื้นหลังแรกที่คุณให้ไว้ด้านบนและพื้นหลังสุดท้ายที่ระบุไว้ในด้านหลัง เฉพาะพื้นหลังสุดท้ายเท่านั้นที่สามารถมีสีพื้นหลังได้

ดังนั้นเมื่อหนึ่ง:

background: red;

เขากำลังตั้งค่าสีพื้นหลังเป็นสีแดงเพราะสีแดงเป็นค่าสุดท้ายที่ระบุไว้

เมื่อหนึ่งทำ:

background: linear-gradient(to right, grey 50%, yellow 2%) red;

สีแดงเป็นสีพื้นหลังอีกครั้งแต่คุณจะเห็นการไล่ระดับสี

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background: inherit;
    }

    <div class="box">
      
     </div>

ตอนนี้สิ่งเดียวกันกับพื้นหลังสี:

    .box{
        border-radius: 50%;
        width: 200px;
        height: 200px;
        background: linear-gradient(to right, grey 50%, yellow 2%) red;
    }

    .box::before{
       content: "";
       display: block;
       margin-left: 50%;
       height: 50%;
       border-radius: 0 100% 100% 0 / 50%;
       transform: translateX(70px) translateY(-26px) rotate(325deg);
       background-color: inherit;
    }

    <div class="box">
      
     </div>

เหตุผลนี้เกิดขึ้นเพราะเมื่อเราทำสิ่งนี้:

background: linear-gradient(to right, grey 50%, yellow 2%) #red;

หมายเลขสุดท้ายตั้งค่าสีพื้นหลัง

จากนั้นก่อนที่เราจะสืบทอดจากพื้นหลัง (จากนั้นเราได้รับการไล่ระดับสี) หรือสีพื้นหลังจากนั้นเราได้รับสีแดง

สิ่งหนึ่งที่ฉันสังเกตเห็นว่าฉันไม่เห็นในเอกสารกำลังใช้งานอยู่ background: url("image.png")

มือสั้น ๆ ดังกล่าวข้างต้นหากไม่พบภาพจะส่งรหัส 302 แทนการถูกเพิกเฉยราวกับว่าคุณใช้

background-image: url("image.png") 

มีข้อบกพร่องเกี่ยวกับพื้นหลังและพื้นหลังสี

ความแตกต่างของสิ่งนี้เมื่อใช้พื้นหลังบางครั้งเมื่อคุณสร้างเว็บเพจในพื้นหลัง CSS: #fff // สามารถนั่งบล็อกรูปอิมเมจ ("ไอเท็มยอดนิยมข้อความหรือรูปภาพ") เพื่อให้ใช้พื้นหลังได้ดีกว่า - สีสำหรับการใช้งานที่ปลอดภัยในการออกแบบของคุณถ้าเป็นของแต่ละบุคคล