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

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

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

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

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

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

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

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

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

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

ทั้งหมดนี้คือตัวอย่างการใช้งาน 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+

Layering Multiple Background Images Cover

Back to Top

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

  1. เขากลับมาแล้ว…บทความนี้อ่านง่าย เข้าใจง่าย เหลือแต่ผมจะตัดหางอึ่งออกไปจากตัวเองนี้แล…ช่างยากเหลือเกิน

    Reply

    • Sitthiphorn Anthawonksa
      Sitthiphorn Anthawonksa

      ยากกว่านี้ ไอ้แบงค์มันอาจจะเมาบทความมันเอง.. ฮ่าาา

      Reply

  2. J-kung Seed

    โมทนาบุญล่วงหน้าด้วยนะครับ

    เกิดเป็นชายต้องบวชให้ได้สักครั้ง

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top