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

เมื่อต้นปีนี้ WebKit ได้อัปเดตลักษณะการทํางานของพร็อพเพอร์ตี้ background แบบย่อของ CSS การเปลี่ยนแปลงนี้จะทำให้พร็อพเพอร์ตี้ทางลัด 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; รูปภาพจะอยู่ที่ 5 พิกเซลจากขอบขวาและ 5 พิกเซลจากด้านล่าง ดูตัวอย่างใน JSBin