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