การใช้งาน Layering Multiple Background Images

สวัสดีพี่น้องชาว ThaiCSS ผู้รักสนุกทุกท่านครับหลังจากหายหัวหนีไปปั่นจักรยานอยู่พักใหญ่ วันนี้ได้ฤกษ์ปล่อยบทความที่ตั้งใจจะเขียนซักทีถือว่าเป็นบทความก่อนลาไปอุปสมบทแล้วกันนะครับ วันนี้ผมจะมาแนะนำการใช้งาน “Layering Multiple Background Images” หรือการใช้งาน Background แบบหลายเลเยอร์นั่นเอง

Layering Multiple Background Images นั้นเป็นความสามารถที่ถูกเพิ่มเข้ามาใน CSS3 โดยความสามารถนี้จะทำให้เว็บดีไซน์เนอร์ทำงานกับ Background ได้ยืดหยุ่นมากขึ้น สำหรับการใช้งานนั้นเพียงใช้เครื่องหมาย comma-separated(,) หรือเครื่องหมายจุลภาค คั่นระหว่างแต่ละ Background ที่ต้องการเรียกใช้โดยคำสั่งที่อยู่แรกจะเป็นตำแหน่งเลเยอร์บนสุด และเรียงลำดับลงไปเรื่อยๆ

ซึ่งการใช้งานจริงสามารถเรียกใช้งานได้สองแบบ คือการเขียนแยกทีละ Properties และการเขียนย่อแบบ Shorthand แยกได้ตามตัวอย่างต่อไปนี้

ตัวอย่างการใช้งานแบบแยก Properties

background-image: url(layer-1.gif), url(layer-2.png), url(layer-3.jpg), none;

*ถึงแม้จะใช้คำสั่ง None ก็ยังถือเป็นเลเยอร์เช่นกัน

สำหรับการสั่งงาน Properties อื่นๆ ก็ใช้เครื่องหมาย (,) คั่นแต่ละคำสั่งเช่นกันโดยการเรียงลำดับจะสัมพันธ์กับตำแหน่งของ background-image โดยอัตโนมัติและหากมีการสั่ง background-image สี่จำนวนแต่มีการระบุ Properties แค่สามจำนวนดังนั้นหมายความว่า background ที่ 4 จะไม่ถูกกำหนด Properties อื่นๆ ไปด้วย

แต่ในกรณีเดียวกันหากมีการกำหนด Background 3 จำนวนแต่มีการกำหนด properties อื่นๆ 4 จำนวน นั่นหมายความว่า Properties สุดท้ายจะไม่ทำงานกับ Background ตัวสุดท้ายเช่นกัน

background-position: center bottom, left top, right top;

ตัวอย่างการใช้งานแบบแยก Shorthand

การเขียนแบบ Shorthand นั้นสามารถเขียนโดยการเขียน Properties “background” แล้วเขียน Properties อื่นๆ แบบ Shorthand ต่อจาก Background นั้นๆ แล้วแค่ใช้ comma-separated(,) คั่นแต่ละฺ Background เอาไว้ตามตัวอย่าง

background: url(layer-1.gif) center bottom no-repeat, 
url(layer-2.png) left top no-repeat, url(layer-3.jpg) right top no-repeat;

ทั้งหมดนี้คือตัวอย่างการใช้งาน Layering Multiple Background Images หวังว่าพี่น้องชาว ThaiCSS จะสนใจแล้วเอาไปต่อยอดไอเดียใช้ในการออกแบบและพัฒนางานของพี่น้องได้ไม่มากก็น้อยนะครับ แล้วพบกันบทความหน้านะครับ

ดูตัวอย่าง การใช้งาน Layering Multiple Background Images

**สำหรับบราวเซอร์ที่ซัพพอร์ท Layering Multiple Background Images คือบราวเซอร์ Firefox เวอร์ชั่น 3.6+ (Gecko 1.9.2), Safari เวอร์ชั่น 1.3+, Chrome เวอร์ชั่น 10+, Opera เวอร์ชั่น 10.50+ (Presto 2.5) and Internet Explorer เวอร์ชั่น 9.0+