Munu

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

หน้าแรก » ข่าวสาร » การใช้งาน Layering Multiple Background Images

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+

Layering Multiple Background Images Cover

เรามีทีมงานผู้เชี่ยวชาญที่มีประสบการณ์ด้านเว็บไซต์

มาประยุกต์ในการพัฒนาการให้บริการอยู่ตลอดเวลา เพื่อสร้างความพึงพอใจสูงสุดให้แก่ลูกค้าทุกท่าน
ด้วยประสบการณ์ที่เรามีอยู่นั้น ทำให้มั่นใจได้ว่าลูกค้าทุกท่านจะได้รับการบริการที่ดีจากเรา

Call

082-493-2295

E-mail

Konyubyub@Gmail.com

Location

บริษัท ดีไซน์นำโชค จำกัด
58/146 หมู่ที่ 6 หมู่บ้านซื่อตรง คลอง13 ตำบลบึงน้ำรักษ์ อำเภอธัญบุรี จังหวัดปทุมธานี 12110

2014 Powered by IYATHAI.com
Tel: 082-493-2295 E-mail: Konyubyub@gmail.com