พื้นหลังคู่ วิธีสร้างภาพพื้นหลัง CSS หลายภาพ โค้ดตัวอย่าง: หลายภาพสำหรับพื้นหลัง
เมื่อเราพูดถึงคุณสมบัติ background-image ในตอนต้นของส่วนนี้ เราไม่ได้พูดถึงสิ่งใดสิ่งหนึ่ง: ใน CSS3 คุณสามารถเพิ่มพื้นหลังได้หลายรายการสำหรับองค์ประกอบเดียวโดยเพียงแค่แสดงรายการโดยคั่นด้วยเครื่องหมายจุลภาค สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อองค์ประกอบที่มีพื้นหลังมีความกว้างหรือความสูงที่เปลี่ยนแปลงได้ และพื้นหลังต้องปรับขนาดของมัน
วิธีตั้งค่าหลายพื้นหลังใน CSS
เราจะแสดงตัวอย่างที่อาจเป็นประโยชน์ในทางปฏิบัติให้คุณดู ลองนึกภาพว่าเราจำเป็นต้องวางบล็อกข้อความไว้ในเฟรม เฟรมเป็นไฟล์กราฟิกในรูปแบบ PNG:
ในงานนี้ เราไม่ทราบความสูงของข้อความ - เราไม่ทราบว่าข้อความจะพอดีกับกรอบอย่างสมบูรณ์หรือเกินขอบเขต เนื่องจากค่าที่ไม่รู้จักนี้ เราจึงไม่สามารถเสี่ยงที่จะใช้ภาพวาดเฟรมดั้งเดิมเป็นพื้นหลังได้ แต่ด้วย CSS เราสามารถบังคับให้เส้นขอบนี้ยาวขึ้นได้ตามต้องการ ในการทำเช่นนี้ คุณจะต้องแบ่งภาพวาดต้นฉบับในตัวแก้ไขกราฟิกออกเป็นสามส่วน - บน ล่าง และกลาง - และบันทึกแต่ละไฟล์แยกกัน แบบนี้:
ด้านบนของกรอบ
ด้านล่างของกรอบ
กลางกรอบ
เราจะสร้างพื้นหลังโดยให้ภาพตรงกลางเฟรมซ้ำตามแนวแกน Yในขณะที่ด้านบนและด้านล่างของเฟรมจะไม่ซ้ำกัน มาเพิ่มพื้นหลังทั้งสามให้กับองค์ประกอบ และเขียนสไตล์ที่จำเป็นอื่นๆ ด้วย:
กรอบ (ภาพพื้นหลัง: url (https://goo.gl/tKyzHt), / * ด้านบนของเฟรม * / url (https://goo.gl/SUKymM), / * ด้านล่างของเฟรม * / url (https: //goo.gl/Km7HVV); / * ตรงกลางของเส้นขอบ * / background-position: ตำแหน่งกึ่งกลางด้านบน, / * ตำแหน่งด้านบนของเส้นขอบ * / ตำแหน่งกึ่งกลางด้านล่าง / * ตำแหน่งด้านล่างของเส้นขอบ * / ตำแหน่งกึ่งกลางด้านบน; / * ตำแหน่ง ของกรอบตรงกลาง * / background -repeat: no-repeat / * ด้านบนของกรอบไม่ซ้ำ * / no-repeat / * ด้านล่างของเฟรมไม่ซ้ำ * / repeat-y; / * ตรงกลาง ของเฟรมซ้ำในแนวตั้ง * / background-size: contain; / * ที่นี่สำหรับพื้นหลังทั้งหมดมีค่าเท่ากัน * / height: auto; / * ความสูงของบล็อกขึ้นอยู่กับปริมาณของเนื้อหา * / width: 400px; / * block width ได้รับการแก้ไขแล้ว * / padding: 30px; / * block padding * /)
พื้นหลังแต่ละอันต้องคั่นด้วยเครื่องหมายจุลภาค และหลังจากท้ายสุดคือเครื่องหมายอัฒภาค ซึ่งระบุจุดสิ้นสุดของการประกาศ เพื่อความสะดวกและอ่านโค้ดได้ง่ายขึ้น เราขอแนะนำให้คุณระบุ URL แต่ละรายการในบรรทัดใหม่
ภาพพื้นหลังถูกจัดเรียงเป็นเลเยอร์ - หนึ่งภาพอยู่ด้านล่างอีกภาพหนึ่ง พื้นหลังที่ระบุก่อนจะอยู่ในชั้นบนสุด พื้นหลังที่สองจะอยู่ใต้แรก พื้นหลังที่สามจะอยู่ใต้สองแรก นั่นคือเหตุผลที่เราวางรูปภาพไว้ตรงกลางเฟรมที่ส่วนท้ายสุด เพื่อไม่ให้ทับซ้อนกับส่วนบนและส่วนล่าง
ถัดไปในโค้ด เราตั้งค่าคุณสมบัติตำแหน่งพื้นหลังและคุณสมบัติการทำซ้ำพื้นหลังสำหรับแต่ละพื้นหลัง (ตามลำดับเดียวกันกับรูปภาพพื้นหลัง) ใช่ คุณเดาถูกแล้ว หากจำเป็น คุณสามารถระบุค่าของคุณสมบัติพื้นหลังอื่นๆ โดยคั่นด้วยเครื่องหมายจุลภาค และถ้าคุณต้องการใช้ค่าเดียวกับพื้นหลังทั้งหมด คุณจดไว้ตามปกติ (ในกรณีของเรา นี่คือคุณสมบัติขนาดพื้นหลัง: ประกอบด้วย)
มาดูผลลัพธ์กันดีกว่า:
อย่างที่คุณเห็น เฟรมอยู่ในตำแหน่งที่ถูกต้อง และตอนนี้มันจัดเฟรมเนื้อหาของบล็อกอย่างสวยงาม จะเกิดอะไรขึ้นหากเราเพิ่มจำนวนข้อความในบล็อก พวกเรามอง:
ส่วนตรงกลางของเฟรมของเราถูกทำซ้ำในแนวตั้งตามจำนวนครั้งที่ต้องการ ราวกับว่าขยายความยาวและปรับให้เข้ากับข้อความ นี่คือเอฟเฟกต์ที่ไม่สามารถทำได้หากเราใช้รูปภาพเฟรมเดียว มาเพิ่มข้อความเพื่อความชัดเจนยิ่งขึ้น:
แน่นอนว่าสามารถใช้พื้นหลังหลายๆ แบบเพื่อวัตถุประสงค์อื่นได้เช่นกัน เราได้แสดงตัวอย่างเพียงหนึ่งตัวอย่างจากหลายๆ ตัวอย่าง ลองนึกภาพสถานการณ์ของคุณและฝึกฝนโดยใช้กลุ่มภูมิหลัง
การใช้สัญกรณ์ย่อ
คุณสมบัติพื้นหลังยังยอมรับค่าหลายค่า ในกรณีของการใช้พื้นหลังหลายๆ แบบ การใช้อักษรย่ออาจสะดวกกว่ามาก เพราะจะทำให้สับสนได้ยากขึ้น มาเขียนโค้ดของเราใหม่สำหรับเฟรมเวิร์ก:
พื้นหลัง: url (https://goo.gl/tKyzHt) กึ่งกลางบน / มีไม่ซ้ำ / * ด้านบนของเฟรม * / url (https://goo.gl/SUKymM) ด้านล่างตรงกลาง / มีไม่ซ้ำ, / * ล่างสุดของเฟรม * / url (https://goo.gl/Km7HVV) ตรงกลางบน / มี repeat-y; / * ตรงกลางเฟรม * /
ตัวเลือกนี้ดูยุ่งยากน้อยลงและเข้าใจง่ายขึ้น
งาน
เพิ่มภาพพื้นหลังสองรูปสำหรับบล็อกโดยใช้ CSS3
สารละลาย
เบราว์เซอร์สมัยใหม่ช่วยให้คุณเพิ่มรูปภาพพื้นหลังจำนวนหนึ่งลงในองค์ประกอบได้ โดยระบุตัวเลือกสำหรับแต่ละพื้นหลังโดยคั่นด้วยเครื่องหมายจุลภาค เพียงพอที่จะใช้พื้นหลังคุณสมบัติสากลและระบุหนึ่งพื้นหลังสำหรับพื้นหลังนั้นก่อนและที่สองโดยคั่นด้วยเครื่องหมายจุลภาค
ตัวอย่างเช่น ลองสร้างเส้นตกแต่งแนวตั้งทางด้านซ้ายและด้านขวาของบล็อก ในการทำเช่นนี้ อันดับแรก เราจะเตรียมภาพที่ควรจะทำซ้ำในแนวตั้งโดยไม่มีตะเข็บ ในรูป 1 แสดงภาพพื้นหลังที่จะแสดงตามขอบด้านซ้ายและในรูปที่ 2 ภาพที่จะแสดงทางด้านขวา
ข้าว. 1. ภาพพื้นหลังสำหรับเส้นขอบด้านซ้าย
ข้าว. 2. ภาพพื้นหลังสำหรับเส้นขอบด้านขวา
เป็นองค์ประกอบบล็อกที่เพิ่มพื้นหลัง แท็กมักจะใช้
ตัวอย่างที่ 1. ภาพพื้นหลังสองภาพ
HTML5 CSS3 IE Cr Op Sa Fx
ผลลัพธ์ของตัวอย่างนี้แสดงในรูปที่ 3.
). วันนี้เราจะมาพูดถึงคุณสมบัติที่น่าสนใจอีกอย่างหนึ่งเล็กน้อย - การใช้ภาพหลายภาพในพื้นหลัง
องค์ประกอบของพื้นหลัง
มีเหตุผลหลายประการที่โดยทั่วไปแล้ว คุณอาจต้องจัดองค์ประกอบภาพหลายภาพในพื้นหลัง โดยเหตุผลที่สำคัญที่สุด ได้แก่:
- ประหยัดทราฟฟิกตามขนาดของภาพ หากแต่ละภาพรวมกันมีน้ำหนักน้อยกว่าภาพที่มีเลเยอร์แบนๆ และ
- ความต้องการพฤติกรรมอิสระของแต่ละเลเยอร์ เช่น เมื่อใช้เอฟเฟกต์พารัลแลกซ์
แนวทางสุดคลาสสิค
ดังนั้น เราจำเป็นต้องวางภาพพื้นหลังหลายภาพไว้เหนืออีกภาพหนึ่ง งานนี้มักจะแก้ไขอย่างไร? ง่ายมาก: บล็อกถูกสร้างขึ้นสำหรับภาพพื้นหลังแต่ละภาพและกำหนดภาพพื้นหลังที่เกี่ยวข้อง บล็อกจะซ้อนกันภายในกันหรือวางในแถวที่มีกฎการวางตำแหน่งที่เหมาะสม นี่เป็นตัวอย่างง่ายๆ:
บล็อกที่มีคลาส "ตกปลา" ภายใน "นางเงือก" เพื่อการสาธิตเท่านั้น
ตอนนี้บางสไตล์:
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing (สูง: 300px; กว้าง: 480px; ตำแหน่ง: ญาติ;) .sample1 .sea (พื้นหลัง: url (สื่อ / sea.png) ทำซ้ำ-x บนซ้าย;) .sample1 .mermaid (พื้นหลัง: url (media / mermaid.svg) ทำซ้ำ x ล่างซ้าย;) .sample1 .fish (พื้นหลัง: url (media / fish.svg) ไม่ทำซ้ำ ความสูง: 70px ความกว้าง: 100px ซ้าย : 30px; ด้านบน: 90px; ตำแหน่ง: สัมบูรณ์;) .sample1 .fishing (พื้นหลัง: url (media / fishing.svg) ไม่มีการทำซ้ำด้านบนขวา 10px;)
ผลลัพธ์: 
ในตัวอย่างนี้ มีพื้นหลังซ้อนกันสามแบบและบล็อกหนึ่งมีปลา อยู่ถัดจากบล็อก "พื้นหลัง" ตามทฤษฎีแล้ว ปลาสามารถเคลื่อนย้ายได้ เช่น ใช้ JavaScript หรือ CSS3 Transitions / Animations
อย่างไรก็ตาม ตัวอย่างนี้ใช้รูปแบบการจัดตำแหน่งพื้นหลังใหม่สำหรับ ".fishing" ซึ่งกำหนดไว้ใน CSS3 ด้วย:
พื้นหลัง: url (สื่อ / fishing.svg) ไม่ซ้ำ ด้านบนขวา 10px;
ปัจจุบันรองรับใน IE9 + และ Opera 11+ แต่ไม่รองรับใน Firefox 10 และ Chrome 16 ดังนั้นผู้ใช้ในสองเบราว์เซอร์ล่าสุดจะยังไม่สามารถจับปลาได้
ภูมิหลังที่หลากหลาย
คุณลักษณะใหม่ที่เพิ่มเข้ามาใน CSS3 ได้รับการช่วยเหลือ - ความสามารถในการกำหนดภาพพื้นหลังหลายภาพสำหรับองค์ประกอบเดียวในคราวเดียว ดูเหมือนว่านี้:
และรูปแบบที่สอดคล้องกัน:
.sample2 .sea (ความสูง: 300px; ความกว้าง: 480px; ตำแหน่ง: ญาติ; background-image: url ("media / fishing.svg"), url ("media / mermaid.svg"), url ("media / sea. png "); ตำแหน่งพื้นหลัง: บนขวา 10px, ซ้ายล่าง, ซ้ายบน; background-repeat: ไม่ซ้ำ, ทำซ้ำ-x, ทำซ้ำ-x;) .sample2 .fish (พื้นหลัง: url (" media / fish.svg ") ห้ามทำซ้ำ ความสูง: 70px ความกว้าง: 100px ซ้าย: 30px ด้านบน: 90px ตำแหน่ง: สัมบูรณ์;)
ในการกำหนดรูปภาพหลายรูป คุณต้องใช้กฎรูปภาพพื้นหลัง โดยระบุรูปภาพแต่ละรูปโดยคั่นด้วยเครื่องหมายจุลภาค สามารถใช้กฎเพิ่มเติม รวมถึงรายการเพื่อกำหนดตำแหน่ง การทำซ้ำ และพารามิเตอร์อื่นๆ สำหรับแต่ละรูปภาพได้ ให้ความสนใจกับลำดับการแสดงภาพ: เรียงชั้นจากซ้ายไปขวาจากบนสุดไปล่างสุด
ผลลัพธ์จะเหมือนกันทุกประการ: 
กฎข้อเดียว
หากไม่จำเป็นต้องเลือกปลาในบล็อกแยกต่างหากสำหรับการปรับแต่งในภายหลัง สามารถเขียนทั้งภาพใหม่ได้ด้วยกฎง่ายๆ ข้อเดียว:รูปแบบ:
.sample3 .sea (ความสูง: 300px; ความกว้าง: 480px; ตำแหน่ง: ญาติ; background-image: url ("media / fishing.svg"), url ("media / mermaid.svg"), url ("media / fish. svg "), url (" media / sea.png "); background-position: บนขวา 10px, ล่างซ้าย, 30px 90px, ซ้ายบน; background-repeat: no-repeat, repeat-x;)
ฉันจะไม่ให้ภาพที่มีผลลัพธ์ - เชื่อฉันสิมันตรงกับสองภาพด้านบน แต่ให้ความสนใจกับรูปแบบอีกครั้งโดยเฉพาะกับ "พื้นหลัง - ซ้ำ" - ตามข้อกำหนดหากส่วนท้ายของรายการขาดหายไปเบราว์เซอร์จะต้องทำซ้ำรายการที่ระบุหลายครั้งเท่าที่จำเป็นเพื่อให้ตรงกับหมายเลข ของภาพในรายการ
ในกรณีนี้ จะเทียบเท่ากับคำอธิบายนี้:
พื้นหลัง-ซ้ำ: ไม่ซ้ำ, ทำซ้ำ-x, ไม่ซ้ำ, ซ้ำ-x;
ยิ่งสั้น
หากคุณจำ CSS 2.1 ได้ จะกำหนดความสามารถในการอธิบายภาพพื้นหลังในลักษณะที่กระชับ แล้วหลายภาพล่ะ? นอกจากนี้ยังเป็นไปได้:ตัวอย่างที่ 4 .sea (ความสูง: 300px ความกว้าง: 480px ตำแหน่ง: ญาติ พื้นหลัง: url ("media / fishing.svg") ด้านบนขวา 10px no-repeat, url ("media / mermaid.svg") ล่างซ้าย repeat-x , url ("media / fish.svg") 30px 90px ไม่ซ้ำ, url ("media / sea.png") ทำซ้ำ-x;)
แต่โปรดทราบว่าตอนนี้คุณไม่สามารถข้ามค่าได้ (เว้นแต่จะตรงกับค่าเริ่มต้น) อย่างไรก็ตาม หากคุณต้องการกำหนดสีของภาพพื้นหลัง จะต้องทำในเลเยอร์สุดท้าย
ภาพไดนามิก
หากองค์ประกอบเป็นแบบคงที่หรือไดนามิกไม่เกินขึ้นอยู่กับขนาดของคอนเทนเนอร์ พื้นหลังหลายอันจะทำให้การออกแบบเพจง่ายขึ้นอย่างเห็นได้ชัด แต่ถ้าคุณต้องการทำงานกับแต่ละองค์ประกอบขององค์ประกอบอย่างอิสระจากจาวาสคริปต์ (ย้าย เลื่อน ฯลฯ)นี่คือตัวอย่างจากชีวิตจริง - ธีมที่มีดอกแดนดิไลอันในยานเดกซ์:
หากคุณขุดลงไปในรหัส คุณจะเห็นสิ่งนี้:
...บล็อกที่มีคลาส "b-fluff-bg", "b-fluff__cloud" และ "b-fluff__item" มีภาพพื้นหลังที่ทับซ้อนกัน ยิ่งไปกว่านั้น พื้นหลังที่มีเมฆจะเลื่อนไปเรื่อย ๆ และดอกแดนดิไลออนก็บินผ่านหน้าจอ
สามารถเขียนใหม่โดยใช้พื้นหลังหลายอันได้หรือไม่ โดยหลักการแล้วใช่ แต่ให้ 1) รองรับคุณสมบัตินี้ในเบราว์เซอร์เป้าหมายและ ... 2) อ่านต่อ;)
ฉันจะเพิ่มลำโพงในหลายพื้นหลังได้อย่างไร ในสถานการณ์เช่นนี้ จะสะดวกกว่าในมุมมองภายใน เบราว์เซอร์จะกระจายพารามิเตอร์แต่ละรายการของภาพพื้นหลังตามกฎที่เหมาะสม ตัวอย่างเช่น สำหรับการจัดตำแหน่งจะมี "ตำแหน่งพื้นหลัง" และสำหรับการชดเชย คุณจะต้องเปลี่ยนเท่านั้น อย่างไรก็ตาม มีค่าใช้จ่ายสำหรับการใช้รูปภาพหลายรูป - กฎนี้ (และกฎที่คล้ายกัน) ต้องระบุตำแหน่งสำหรับพื้นหลังทั้งหมดที่ตั้งไว้สำหรับบล็อกของคุณ และคุณไม่สามารถเลือกได้
หากต้องการเพิ่มแอนิเมชั่นให้กับพื้นหลังด้วยปลา คุณสามารถใช้รหัสต่อไปนี้:
$ (เอกสาร) .ready (ฟังก์ชัน () (var sea = $ (". sample5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var mermaidX = 0; var t = 0; ฟังก์ชัน animationLoop () (fishesY = 90 + Math.floor (30 * Math.sin (t ++ / 180.0)); if (- fishesX< 0) fishesX = 480;
mermaidX += 0.5;
if(mermaidX >480) นางเงือกX = 0; ปลาY = -10 + (10 * Math.cos (t * 0.091)); ปลาX = 10 + (5 * Math.sin (t * 0.07)); sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px" + mermaidX + "px bottom" + fishesX + "px" + fishesY + "px, ซ้ายบน"; window.requestAnimFrame (animationLoop); ) animationLoop (); ));
ที่ไหน
window.requestAnimFrame = (ฟังก์ชัน () (return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (ฟังก์ชัน (โทรกลับ)) (60 );));) );
และอีกอย่าง แอนิเมชั่นสามารถทำได้ผ่านการเปลี่ยน CSS3 / แอนิเมชั่น แต่นี่เป็นหัวข้อสำหรับการสนทนาแยกต่างหาก
Parallax และโต้ตอบ
สุดท้าย ด้วยการซ้อมรบที่คล้ายคลึงกัน คุณสามารถเพิ่มเอฟเฟกต์พารัลแลกซ์หรือการโต้ตอบแบบโต้ตอบกับพื้นหลังได้อย่างง่ายดาย:ภาพพื้นหลังหลายภาพมีประโยชน์ในสถานการณ์เช่นนี้ เนื่องจากในขณะที่เรากำลังพูดถึงแต่พื้นหลังเท่านั้น (ไม่ใช่เนื้อหา) การใช้ภาพเหล่านี้จะช่วยให้คุณหลีกเลี่ยงไม่ให้โค้ด html และ DOM ยุ่งเหยิง แต่ทุกอย่างต้องแลกมาด้วยราคา: ฉันไม่สามารถเข้าถึงองค์ประกอบแต่ละองค์ประกอบด้วยชื่อ รหัส คลาส หรือพารามิเตอร์อื่นๆ ฉันต้องจำลำดับขององค์ประกอบในองค์ประกอบในโค้ดให้ชัดเจน และสำหรับการเปลี่ยนแปลงพารามิเตอร์ขององค์ประกอบใดๆ แต่ละครั้ง อันที่จริง ฉันต้องกาวบรรทัดที่อธิบายค่าของพารามิเตอร์นี้สำหรับองค์ประกอบทั้งหมดและอัปเดต องค์ประกอบทั้งหมด
Sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px," + mermaidX + "px bottom" + fishesX + "px" + fishesY + "px, ซ้ายบน";
ฉันแน่ใจว่าสิ่งนี้สามารถหุ้มด้วยโค้ดจาวาสคริปต์ที่สะดวก ซึ่งจะควบคุมการจำลองเสมือนของความสัมพันธ์กับแต่ละเลเยอร์ ในขณะที่ปล่อยให้โค้ด html ของหน้าสะอาดที่สุด
ความเข้ากันได้คืออะไร?
เบราว์เซอร์ยอดนิยมเวอร์ชันใหม่ทั้งหมด รวมถึง IE9 + รองรับหลายภาพ (คุณสามารถตรวจสอบได้ เช่น caniuse)คุณยังสามารถใช้ Modernizr เพื่อจัดเตรียมเบราว์เซอร์ที่ไม่สนับสนุนพื้นหลังหลายแบบพร้อมทางเลือกอื่น ตามที่ Chris Coyier เขียนไว้ในบันทึกของเขาเกี่ยวกับลำดับเลเยอร์เมื่อใช้พื้นหลังหลายอัน ให้ทำดังนี้:
เนื้อหา Multiplebgs (/ * การประกาศ BG หลายอันที่ยอดเยี่ยมที่อยู่เหนือความเป็นจริงและลูกไก่ที่ไร้เหตุผล * /) .no-multiplebgs เนื้อหา (/ * laaaaaame fallback * /)
หากคุณสับสนเกี่ยวกับการใช้ JS เพื่อจัดเตรียมความเข้ากันได้แบบย้อนหลัง คุณสามารถประกาศพื้นหลังได้สองครั้ง อย่างไรก็ตาม สิ่งนี้ก็มีข้อเสียในรูปแบบของการโหลดทรัพยากรสองครั้งที่เป็นไปได้ (ขึ้นอยู่กับการนำการประมวลผล css ไปใช้งานในเบราว์เซอร์เฉพาะ):
/ * หลาย bg สำรอง * / พื้นหลัง: # 000 url (...) ...; / * การประกาศ BG หลายอันที่ยอดเยี่ยมซึ่งอยู่เหนือความเป็นจริงและลูกไก่ที่ไม่มีตัวตน * / URL พื้นหลัง (... ), url (... ), url (... ), # 000 url (... );
หากคุณได้เริ่มคิดเกี่ยวกับ Windows 8 แล้ว โปรดทราบว่าคุณสามารถใช้พื้นหลังได้หลายแบบเมื่อพัฒนาแอปพลิเคชันสไตล์เมโทร เนื่องจากมีการใช้เอ็นจิ้นเดียวกันภายในเช่นเดียวกับใน IE10
ป.ล. ในหัวข้อ: ฉันอดไม่ได้ที่จะจำบทความมหัศจรรย์เกี่ยวกับ
สามารถเพิ่มภาพพื้นหลังหลายภาพลงในองค์ประกอบเดียวได้โดยใช้คุณสมบัติพื้นหลังเดียว วิธีนี้ช่วยให้คุณใช้องค์ประกอบเดียวเพื่อสร้างพื้นหลังที่ซับซ้อนหรือรูปภาพเดียว โดยแสดงหลายครั้งด้วยการตั้งค่าที่ต่างกัน รูปภาพทั้งหมดที่มีพารามิเตอร์จะแสดงรายการโดยคั่นด้วยเครื่องหมายจุลภาค ในขณะเดียวกันก็มีการระบุรูปภาพก่อน ซึ่งจะแสดงที่ด้านบนของรูปภาพที่เหลือ และรูปภาพสุดท้ายตามลำดับคือรูปภาพที่ต่ำที่สุด ตัวอย่างที่ 1 แสดงวิธีการสร้างพื้นหลังที่มีสามภาพ
ตัวอย่างที่ 1. ภูมิหลังสามประการ
หากคุณต้องการตั้งค่าคุณสมบัติสไตล์บางอย่างสำหรับพื้นหลังแยกกัน เช่น ขนาดพื้นหลังตามตัวอย่างด้านบน พารามิเตอร์สำหรับแต่ละพื้นหลังจะแสดงรายการโดยคั่นด้วยเครื่องหมายจุลภาค ผลลัพธ์ของตัวอย่างนี้แสดงในรูปที่ 1.
ข้าว. 1. พื้นหลังที่มีสามภาพ
รูปภาพแยกต่างหากสำหรับพื้นหลังทำให้คุณสามารถเปลี่ยนตำแหน่งและเคลื่อนไหวได้ดังที่แสดงในตัวอย่างที่ 2
ตัวอย่างที่ 2 พื้นหลังเคลื่อนไหว
ตอนนี้เรามาดูวิธีการใช้รูปภาพหนึ่งภาพเพื่อสร้างบล็อกที่มีกรอบ (รูปที่ 2) ความกว้างของบล็อกได้รับการแก้ไข และความสูงจะยืดออกขึ้นอยู่กับปริมาณของเนื้อหาของบล็อก
ข้าว. 2. กรอบวาดด้วยมือ
รูปภาพแสดงส่วนบนและส่วนล่างอย่างชัดเจน ซึ่งจะต้องตัดในโปรแกรมแก้ไขกราฟิกและจัดวางในแนวนอน เลือกส่วนตรงกลางเพื่อให้ทำซ้ำในแนวตั้งโดยไม่มีตะเข็บ รูปภาพมีรูปแบบการทำซ้ำที่เด่นชัด ดังนั้นจึงไม่ควรมีปัญหากับการเลือก เป็นผลให้คุณจะได้ภาพที่เตรียมไว้ (รูปที่ 3) กล่องตาหมากรุกแสดงถึงความโปร่งใส ช่วยให้คุณสามารถตั้งค่าพื้นหลังสีพร้อมกับรูปภาพและเปลี่ยนสไตล์ได้อย่างง่ายดาย
ข้าว. 3.เตรียมภาพพื้นหลัง
พื้นหลังจะแสดงโดยคุณสมบัติพื้นหลัง และยังตั้งค่าพิกัดของส่วนที่ต้องการด้วย พารามิเตอร์ของแต่ละพื้นหลังจะแสดงรายการคั่นด้วยเครื่องหมายจุลภาค และในกรณีนี้ ลำดับของพารามิเตอร์มีความสำคัญ เราต้องการให้ส่วนบนและส่วนล่างของบล็อกไม่ทับซ้อนกัน ดังนั้นเราจึงวางมันไว้ก่อน (ตัวอย่างที่ 3) สีพื้นหลังถูกระบุเป็นครั้งสุดท้าย
ตัวอย่างที่ 3 ภาพพื้นหลังหลายภาพ
Huitzilopochtli - "พ่อมดฮัมมิ่งเบิร์ด" เทพเจ้าแห่งสงครามและดวงอาทิตย์
Tezcatlipoca - "กระจกสูบบุหรี่" เทพเจ้าหลักของ Aztecs
มนุษย์ได้ถวายเครื่องบูชาแก่พระเจ้าทั้งสองพระองค์
พื้นหลังแรกวาดเส้นขอบด้านบนของกล่อง พื้นหลังที่สองวาดด้านล่าง และที่สามวาดเส้นขอบแนวตั้ง สุดท้ายคือสีที่มองเห็นได้ในส่วนกลางโปร่งใสของบล็อก (รูปที่ 4)
). วันนี้เราจะมาพูดถึงคุณสมบัติที่น่าสนใจอีกอย่างหนึ่งเล็กน้อย - การใช้ภาพหลายภาพในพื้นหลัง
องค์ประกอบของพื้นหลัง
มีเหตุผลหลายประการที่โดยทั่วไปแล้ว คุณอาจต้องจัดองค์ประกอบภาพหลายภาพในพื้นหลัง โดยเหตุผลที่สำคัญที่สุด ได้แก่:
- ประหยัดทราฟฟิกตามขนาดของภาพ หากแต่ละภาพรวมกันมีน้ำหนักน้อยกว่าภาพที่มีเลเยอร์แบนๆ และ
- ความต้องการพฤติกรรมอิสระของแต่ละเลเยอร์ เช่น เมื่อใช้เอฟเฟกต์พารัลแลกซ์
แนวทางสุดคลาสสิค
ดังนั้น เราจำเป็นต้องวางภาพพื้นหลังหลายภาพไว้เหนืออีกภาพหนึ่ง งานนี้มักจะแก้ไขอย่างไร? ง่ายมาก: บล็อกถูกสร้างขึ้นสำหรับภาพพื้นหลังแต่ละภาพและกำหนดภาพพื้นหลังที่เกี่ยวข้อง บล็อกจะซ้อนกันภายในกันหรือวางในแถวที่มีกฎการวางตำแหน่งที่เหมาะสม นี่เป็นตัวอย่างง่ายๆ:
บล็อกที่มีคลาส "ตกปลา" ภายใน "นางเงือก" เพื่อการสาธิตเท่านั้น
ตอนนี้บางสไตล์:
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing (สูง: 300px; กว้าง: 480px; ตำแหน่ง: ญาติ;) .sample1 .sea (พื้นหลัง: url (สื่อ / sea.png) ทำซ้ำ-x บนซ้าย;) .sample1 .mermaid (พื้นหลัง: url (media / mermaid.svg) ทำซ้ำ x ล่างซ้าย;) .sample1 .fish (พื้นหลัง: url (media / fish.svg) ไม่ทำซ้ำ ความสูง: 70px ความกว้าง: 100px ซ้าย : 30px; ด้านบน: 90px; ตำแหน่ง: สัมบูรณ์;) .sample1 .fishing (พื้นหลัง: url (media / fishing.svg) ไม่มีการทำซ้ำด้านบนขวา 10px;)
ผลลัพธ์:
ในตัวอย่างนี้ มีพื้นหลังซ้อนกันสามแบบและบล็อกหนึ่งมีปลา อยู่ถัดจากบล็อก "พื้นหลัง" ตามทฤษฎีแล้ว ปลาสามารถเคลื่อนย้ายได้ เช่น ใช้ JavaScript หรือ CSS3 Transitions / Animations
อย่างไรก็ตาม ตัวอย่างนี้ใช้รูปแบบการจัดตำแหน่งพื้นหลังใหม่สำหรับ ".fishing" ซึ่งกำหนดไว้ใน CSS3 ด้วย:
พื้นหลัง: url (สื่อ / fishing.svg) ไม่ซ้ำ ด้านบนขวา 10px;
ปัจจุบันรองรับใน IE9 + และ Opera 11+ แต่ไม่รองรับใน Firefox 10 และ Chrome 16 ดังนั้นผู้ใช้ในสองเบราว์เซอร์ล่าสุดจะยังไม่สามารถจับปลาได้
ภูมิหลังที่หลากหลาย
คุณลักษณะใหม่ที่เพิ่มเข้ามาใน CSS3 ได้รับการช่วยเหลือ - ความสามารถในการกำหนดภาพพื้นหลังหลายภาพสำหรับองค์ประกอบเดียวในคราวเดียว ดูเหมือนว่านี้:
และรูปแบบที่สอดคล้องกัน:
.sample2 .sea (ความสูง: 300px; ความกว้าง: 480px; ตำแหน่ง: ญาติ; background-image: url ("media / fishing.svg"), url ("media / mermaid.svg"), url ("media / sea. png "); ตำแหน่งพื้นหลัง: บนขวา 10px, ซ้ายล่าง, ซ้ายบน; background-repeat: ไม่ซ้ำ, ทำซ้ำ-x, ทำซ้ำ-x;) .sample2 .fish (พื้นหลัง: url (" media / fish.svg ") ห้ามทำซ้ำ ความสูง: 70px ความกว้าง: 100px ซ้าย: 30px ด้านบน: 90px ตำแหน่ง: สัมบูรณ์;)
ในการกำหนดรูปภาพหลายรูป คุณต้องใช้กฎรูปภาพพื้นหลัง โดยระบุรูปภาพแต่ละรูปโดยคั่นด้วยเครื่องหมายจุลภาค สามารถใช้กฎเพิ่มเติม รวมถึงรายการเพื่อกำหนดตำแหน่ง การทำซ้ำ และพารามิเตอร์อื่นๆ สำหรับแต่ละรูปภาพได้ ให้ความสนใจกับลำดับการแสดงภาพ: เรียงชั้นจากซ้ายไปขวาจากบนสุดไปล่างสุด
ผลลัพธ์จะเหมือนกันทุกประการ:
กฎข้อเดียว
หากไม่จำเป็นต้องเลือกปลาในบล็อกแยกต่างหากสำหรับการปรับแต่งในภายหลัง สามารถเขียนทั้งภาพใหม่ได้ด้วยกฎง่ายๆ ข้อเดียว:รูปแบบ:
.sample3 .sea (ความสูง: 300px; ความกว้าง: 480px; ตำแหน่ง: ญาติ; background-image: url ("media / fishing.svg"), url ("media / mermaid.svg"), url ("media / fish. svg "), url (" media / sea.png "); background-position: บนขวา 10px, ล่างซ้าย, 30px 90px, ซ้ายบน; background-repeat: no-repeat, repeat-x;)
ฉันจะไม่ให้ภาพที่มีผลลัพธ์ - เชื่อฉันสิมันตรงกับสองภาพด้านบน แต่ให้ความสนใจกับรูปแบบอีกครั้งโดยเฉพาะกับ "พื้นหลัง - ซ้ำ" - ตามข้อกำหนดหากส่วนท้ายของรายการขาดหายไปเบราว์เซอร์จะต้องทำซ้ำรายการที่ระบุหลายครั้งเท่าที่จำเป็นเพื่อให้ตรงกับหมายเลข ของภาพในรายการ
ในกรณีนี้ จะเทียบเท่ากับคำอธิบายนี้:
พื้นหลัง-ซ้ำ: ไม่ซ้ำ, ทำซ้ำ-x, ไม่ซ้ำ, ซ้ำ-x;
ยิ่งสั้น
หากคุณจำ CSS 2.1 ได้ จะกำหนดความสามารถในการอธิบายภาพพื้นหลังในลักษณะที่กระชับ แล้วหลายภาพล่ะ? นอกจากนี้ยังเป็นไปได้:ตัวอย่างที่ 4 .sea (ความสูง: 300px ความกว้าง: 480px ตำแหน่ง: ญาติ พื้นหลัง: url ("media / fishing.svg") ด้านบนขวา 10px no-repeat, url ("media / mermaid.svg") ล่างซ้าย repeat-x , url ("media / fish.svg") 30px 90px ไม่ซ้ำ, url ("media / sea.png") ทำซ้ำ-x;)
แต่โปรดทราบว่าตอนนี้คุณไม่สามารถข้ามค่าได้ (เว้นแต่จะตรงกับค่าเริ่มต้น) อย่างไรก็ตาม หากคุณต้องการกำหนดสีของภาพพื้นหลัง จะต้องทำในเลเยอร์สุดท้าย
ภาพไดนามิก
หากองค์ประกอบเป็นแบบคงที่หรือไดนามิกไม่เกินขึ้นอยู่กับขนาดของคอนเทนเนอร์ พื้นหลังหลายอันจะทำให้การออกแบบเพจง่ายขึ้นอย่างเห็นได้ชัด แต่ถ้าคุณต้องการทำงานกับแต่ละองค์ประกอบขององค์ประกอบอย่างอิสระจากจาวาสคริปต์ (ย้าย เลื่อน ฯลฯ)นี่คือตัวอย่างจากชีวิตจริง - ธีมที่มีดอกแดนดิไลอันในยานเดกซ์:
หากคุณขุดลงไปในรหัส คุณจะเห็นสิ่งนี้:
...บล็อกที่มีคลาส "b-fluff-bg", "b-fluff__cloud" และ "b-fluff__item" มีภาพพื้นหลังที่ทับซ้อนกัน ยิ่งไปกว่านั้น พื้นหลังที่มีเมฆจะเลื่อนไปเรื่อย ๆ และดอกแดนดิไลออนก็บินผ่านหน้าจอ
สามารถเขียนใหม่โดยใช้พื้นหลังหลายอันได้หรือไม่ โดยหลักการแล้วใช่ แต่ให้ 1) รองรับคุณสมบัตินี้ในเบราว์เซอร์เป้าหมายและ ... 2) อ่านต่อ;)
ฉันจะเพิ่มลำโพงในหลายพื้นหลังได้อย่างไร ในสถานการณ์เช่นนี้ จะสะดวกกว่าในมุมมองภายใน เบราว์เซอร์จะกระจายพารามิเตอร์แต่ละรายการของภาพพื้นหลังตามกฎที่เหมาะสม ตัวอย่างเช่น สำหรับการจัดตำแหน่งจะมี "ตำแหน่งพื้นหลัง" และสำหรับการชดเชย คุณจะต้องเปลี่ยนเท่านั้น อย่างไรก็ตาม มีค่าใช้จ่ายสำหรับการใช้รูปภาพหลายรูป - กฎนี้ (และกฎที่คล้ายกัน) ต้องระบุตำแหน่งสำหรับพื้นหลังทั้งหมดที่ตั้งไว้สำหรับบล็อกของคุณ และคุณไม่สามารถเลือกได้
หากต้องการเพิ่มแอนิเมชั่นให้กับพื้นหลังด้วยปลา คุณสามารถใช้รหัสต่อไปนี้:
$ (เอกสาร) .ready (ฟังก์ชัน () (var sea = $ (". sample5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var mermaidX = 0; var t = 0; ฟังก์ชัน animationLoop () (fishesY = 90 + Math.floor (30 * Math.sin (t ++ / 180.0)); if (- fishesX< 0) fishesX = 480;
mermaidX += 0.5;
if(mermaidX >480) นางเงือกX = 0; ปลาY = -10 + (10 * Math.cos (t * 0.091)); ปลาX = 10 + (5 * Math.sin (t * 0.07)); sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px" + mermaidX + "px bottom" + fishesX + "px" + fishesY + "px, ซ้ายบน"; window.requestAnimFrame (animationLoop); ) animationLoop (); ));
ที่ไหน
window.requestAnimFrame = (ฟังก์ชัน () (return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (ฟังก์ชัน (โทรกลับ)) (60 );));) );
และอีกอย่าง แอนิเมชั่นสามารถทำได้ผ่านการเปลี่ยน CSS3 / แอนิเมชั่น แต่นี่เป็นหัวข้อสำหรับการสนทนาแยกต่างหาก
Parallax และโต้ตอบ
สุดท้าย ด้วยการซ้อมรบที่คล้ายคลึงกัน คุณสามารถเพิ่มเอฟเฟกต์พารัลแลกซ์หรือการโต้ตอบแบบโต้ตอบกับพื้นหลังได้อย่างง่ายดาย:ภาพพื้นหลังหลายภาพมีประโยชน์ในสถานการณ์เช่นนี้ เนื่องจากในขณะที่เรากำลังพูดถึงแต่พื้นหลังเท่านั้น (ไม่ใช่เนื้อหา) การใช้ภาพเหล่านี้จะช่วยให้คุณหลีกเลี่ยงไม่ให้โค้ด html และ DOM ยุ่งเหยิง แต่ทุกอย่างต้องแลกมาด้วยราคา: ฉันไม่สามารถเข้าถึงองค์ประกอบแต่ละองค์ประกอบด้วยชื่อ รหัส คลาส หรือพารามิเตอร์อื่นๆ ฉันต้องจำลำดับขององค์ประกอบในองค์ประกอบในโค้ดให้ชัดเจน และสำหรับการเปลี่ยนแปลงพารามิเตอร์ขององค์ประกอบใดๆ แต่ละครั้ง อันที่จริง ฉันต้องกาวบรรทัดที่อธิบายค่าของพารามิเตอร์นี้สำหรับองค์ประกอบทั้งหมดและอัปเดต องค์ประกอบทั้งหมด
Sea.style.backgroundPosition = "top" + fishY + "px right" + fishX + "px," + mermaidX + "px bottom" + fishesX + "px" + fishesY + "px, ซ้ายบน";
ฉันแน่ใจว่าสิ่งนี้สามารถหุ้มด้วยโค้ดจาวาสคริปต์ที่สะดวก ซึ่งจะควบคุมการจำลองเสมือนของความสัมพันธ์กับแต่ละเลเยอร์ ในขณะที่ปล่อยให้โค้ด html ของหน้าสะอาดที่สุด
ความเข้ากันได้คืออะไร?
เบราว์เซอร์ยอดนิยมเวอร์ชันใหม่ทั้งหมด รวมถึง IE9 + รองรับหลายภาพ (คุณสามารถตรวจสอบได้ เช่น caniuse)คุณยังสามารถใช้ Modernizr เพื่อจัดเตรียมเบราว์เซอร์ที่ไม่สนับสนุนพื้นหลังหลายแบบพร้อมทางเลือกอื่น ตามที่ Chris Coyier เขียนไว้ในบันทึกของเขาเกี่ยวกับลำดับเลเยอร์เมื่อใช้พื้นหลังหลายอัน ให้ทำดังนี้:
เนื้อหา Multiplebgs (/ * การประกาศ BG หลายอันที่ยอดเยี่ยมที่อยู่เหนือความเป็นจริงและลูกไก่ที่ไร้เหตุผล * /) .no-multiplebgs เนื้อหา (/ * laaaaaame fallback * /)
หากคุณสับสนเกี่ยวกับการใช้ JS เพื่อจัดเตรียมความเข้ากันได้แบบย้อนหลัง คุณสามารถประกาศพื้นหลังได้สองครั้ง อย่างไรก็ตาม สิ่งนี้ก็มีข้อเสียในรูปแบบของการโหลดทรัพยากรสองครั้งที่เป็นไปได้ (ขึ้นอยู่กับการนำการประมวลผล css ไปใช้งานในเบราว์เซอร์เฉพาะ):
/ * หลาย bg สำรอง * / พื้นหลัง: # 000 url (...) ...; / * การประกาศ BG หลายอันที่ยอดเยี่ยมซึ่งอยู่เหนือความเป็นจริงและลูกไก่ที่ไม่มีตัวตน * / URL พื้นหลัง (... ), url (... ), url (... ), # 000 url (... );
หากคุณได้เริ่มคิดเกี่ยวกับ Windows 8 แล้ว โปรดทราบว่าคุณสามารถใช้พื้นหลังได้หลายแบบเมื่อพัฒนาแอปพลิเคชันสไตล์เมโทร เนื่องจากมีการใช้เอ็นจิ้นเดียวกันภายในเช่นเดียวกับใน IE10
ป.ล. ในหัวข้อ: ฉันอดไม่ได้ที่จะจำบทความมหัศจรรย์เกี่ยวกับเรื่องนี้ได้
ตัวอย่างของฟังก์ชัน jQuery setTimeout () Javascript ป้องกันไม่ให้ตัวจับเวลาหลายตัวเรียกใช้ setinterval ในเวลาเดียวกัน
DIY วงจรวิทยุสมัครเล่นและผลิตภัณฑ์ทำเอง
ครอบตัดข้อความที่มีความสูงหนึ่งหรือหลายบรรทัดด้วยการเพิ่มจุดไข่ปลา การเพิ่มการไล่ระดับสีให้กับข้อความ