พื้นหลัง CSS เปิดให้ใช้งานในเบราว์เซอร์ WebKit บนอุปกรณ์เคลื่อนที่แล้ว

เมื่อต้นปีนี้ WebKit ได้อัปเดตลักษณะการทำงานของพร็อพเพอร์ตี้ชวเลข CSS background การเปลี่ยนแปลงนี้ทําให้พร็อพเพอร์ตี้ชวเลข background รีเซ็ต background-size เป็นค่าเริ่มต้น auto auto หากไม่ได้กําหนดไว้ในการประกาศชวเลข การเปลี่ยนแปลงนี้ทำให้ Chrome และเบราว์เซอร์ WebKit อื่นๆ ปฏิบัติตามข้อกำหนดและสอดคล้องกับลักษณะการทำงานของ Firefox, Opera และ Internet Explorer

สำหรับ Chrome สำหรับ Android ที่ก้าวสู่เวอร์ชันปัจจุบันใน WebKit การเปลี่ยนแปลงนี้จะเริ่มเปิดตัวใน Android เนื่องจากนี่เป็นการแก้ไขสำหรับ Webkit เว็บไซต์ที่ทดสอบในเบราว์เซอร์ต่างๆ จึงมีแนวโน้มที่จะไม่ได้รับผลกระทบ

วิธีเดิมในการทำสิ่งต่างๆ

// background-size is reset to auto auto by the background shorthand
.foo {
    background-size: 50px 40px;
    background: url(foo.png) no-repeat;
}

พร็อพเพอร์ตี้ชวเลข background ไม่มีพร็อพเพอร์ตี้ขนาดใดๆ ดังนั้นจะรีเซ็ต background-size เป็นค่าเริ่มต้น auto auto

วิธีที่ถูกต้องในการระบุขนาดรูปภาพ

// background-size is specified after background
.fooA {
    background: url(foo.png) no-repeat;
    background-size: 50px 40px;
}

// background-size is specified inline after position
.fooB {
    background: url(foo.png) 0% / 50px 40px no-repeat;
}

ใน fooB การระบุ background-size ในชวเลข background จะต้องระบุ position (0%) ก่อน ตามด้วยเครื่องหมายทับ ตามด้วย background-size (50px 40px)

การแก้ไขสำหรับโค้ดที่มีอยู่

มีหลายวิธีที่จะช่วยแก้ปัญหานี้ได้อย่างง่ายดาย:

  • ใช้ background-image แทนพร็อพเพอร์ตี้ชวเลข background
  • ตั้งค่า background-size สุดท้ายโดยมีความเฉพาะเจาะจงสูงกว่ากฎ CSS อื่นๆ ที่กำหนด background ในองค์ประกอบนั้น แล้วอย่าลืมตรวจสอบและ:hoverกฎ
  • ใช้พร็อพเพอร์ตี้ !important กับ background-size
  • ย้ายข้อมูลการปรับขนาดไปยังพร็อพเพอร์ตี้ชวเลข background

โบนัส: การชดเชยภาพพื้นหลัง

นอกเหนือจากการเปลี่ยนแปลงนี้แล้ว ตอนนี้ก็มีความยืดหยุ่นมากขึ้นในการกำหนดตำแหน่งรูปภาพภายในพื้นหลังด้วย ก่อนหน้านี้ คุณจะระบุตำแหน่งของรูปภาพที่เกี่ยวข้องจากมุมซ้ายบนได้เท่านั้น แต่ในตอนนี้จะระบุออฟเซ็ตจากขอบของคอนเทนเนอร์ได้ เช่น การตั้งค่า background-position: right 5px bottom 5px; รูปภาพจะอยู่ในตำแหน่ง 5px จากขอบด้านขวาและ 5px จากด้านล่าง ดูตัวอย่างนี้ใน JSBin