เมื่อต้นปีนี้ 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