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