คุณสามารถเพิ่มหลายองค์ประกอบในคราวเดียวได้ ภาพพื้นหลังผ่านคุณสมบัติพื้นหลังเดียว สิ่งนี้ทำให้คุณสามารถสร้างองค์ประกอบเดียวได้ พื้นหลังที่ซับซ้อนหรือภาพเดียวแสดงหลาย ๆ ครั้งด้วย การตั้งค่าต่างๆ- รูปภาพทั้งหมดที่มีพารามิเตอร์จะแสดงรายการคั่นด้วยเครื่องหมายจุลภาค โดยรูปภาพที่แสดงที่ด้านบนของรูปภาพอื่นๆ จะถูกระบุเป็นอันดับแรก และสุดท้ายตามลำดับคือรูปภาพที่ต่ำที่สุด ตัวอย่างที่ 1 แสดงวิธีสร้างพื้นหลังด้วยรูปภาพสามรูป

ตัวอย่างที่ 1 สามพื้นหลัง

หากคุณต้องการตั้งค่าคุณสมบัติสไตล์บางอย่างสำหรับพื้นหลังแยกกัน เช่น ขนาดพื้นหลังตามตัวอย่างด้านบน พารามิเตอร์สำหรับพื้นหลังแต่ละรายการจะแสดงรายการโดยคั่นด้วยเครื่องหมายจุลภาค ผลลัพธ์ของตัวอย่างนี้แสดงไว้ในรูปที่ 1 1.

ข้าว. 1. พื้นหลังที่มีสามภาพ

ภาพพื้นหลังแต่ละภาพช่วยให้คุณสามารถเปลี่ยนตำแหน่งและทำให้เคลื่อนไหวได้ ดังที่แสดงในตัวอย่างที่ 2

ตัวอย่างที่ 2 พื้นหลังเคลื่อนไหว

ตอนนี้เรามาดูวิธีใช้รูปภาพหนึ่งรูปเพื่อสร้างบล็อกที่มีกรอบ (รูปที่ 2) ความกว้างของบล็อกได้รับการแก้ไขแล้ว และความสูงจะแตกต่างกันไปขึ้นอยู่กับปริมาณของเนื้อหาในบล็อก

ข้าว. 2. กรอบที่วาดด้วยมือ

รูปนี้แสดงส่วนบนและส่วนล่างที่ต้องตัดออกอย่างชัดเจน โปรแกรมแก้ไขกราฟิกและวางไว้ในแนวนอน เลือกส่วนตรงกลางเพื่อให้ทำซ้ำในแนวตั้งโดยไม่มีตะเข็บ รูปภาพมีรูปแบบการทำซ้ำที่เด่นชัด ดังนั้นจึงไม่จำเป็นต้องเน้นให้ลำบาก ผลลัพธ์จะเป็นภาพที่เตรียมไว้ (รูปที่ 3) ช่องตารางหมากรุกบ่งบอกถึงความโปร่งใส ช่วยให้คุณตั้งค่าพื้นหลังสีพร้อมกับรูปภาพและเปลี่ยนสไตล์ได้อย่างง่ายดาย

ข้าว. 3. ภาพที่เตรียมไว้สำหรับพื้นหลัง

พื้นหลังจะแสดงโดยคุณสมบัติพื้นหลัง ซึ่งระบุพิกัดด้วย ส่วนที่ต้องการ- พารามิเตอร์ของแต่ละพื้นหลังจะแสดงรายการโดยคั่นด้วยเครื่องหมายจุลภาคและใน ในกรณีนี้คำสั่งซื้อของพวกเขามีความสำคัญ เราต้องการให้ด้านบนและด้านล่างของบล็อกไม่ทับซ้อนกัน ดังนั้นเราจึงใส่ไว้ก่อน (ตัวอย่างที่ 3) สีพื้นหลังระบุเป็นลำดับสุดท้าย

ตัวอย่างที่ 3 ภาพพื้นหลังหลายรูป

พื้นหลังแรกจะแสดงเส้นขอบด้านบนของบล็อก พื้นหลังที่สอง - ด้านล่าง และพื้นหลังที่สาม - เส้นขอบแนวตั้ง สีสุดท้ายคือสีที่มองเห็นได้ตรงกลางโปร่งใสของบล็อก (รูปที่ 4)

การใช้องค์ประกอบหลอก CSS 2.1 ทำให้สามารถใช้พื้นหลังได้ 3 ระดับ 2 รูปภาพด้วย ขนาดคงที่และลายเส้นที่ซับซ้อนหลายจังหวะในหนึ่งเดียว องค์ประกอบ HTML. วิธีการนี้ขยายขีดความสามารถในการออกแบบหน้าเว็บอย่างมากสำหรับเบราว์เซอร์ทั้งหมดที่รองรับองค์ประกอบหลอก CSS 2.1 พร้อมการวางตำแหน่ง ไม่จำเป็นต้องรองรับ CSS3

โดยพื้นฐานแล้ว การสร้างและการทำงานกับองค์ประกอบหลอก CSS (:ก่อนและ :หลัง) จะคล้ายกับวิธีที่คุณทำงานกับองค์ประกอบ HTML ที่ซ้อนกันภายในองค์ประกอบเป้าหมาย แต่มีข้อได้เปรียบที่สำคัญอย่างหนึ่ง - ทุกอย่างทำนอกความหมายโดยไม่ต้องใช้องค์ประกอบ HTML ที่ซ้อนกัน

หากต้องการสร้างพื้นหลังและ/หรือลายเส้นหลายแบบ องค์ประกอบหลอกจะถูกย้ายไปด้านหลังเนื้อหาและแนบไปกับ จุดที่ถูกต้ององค์ประกอบ HTML ที่ใช้ตำแหน่งที่แน่นอน

องค์ประกอบหลอกไม่มีเนื้อหาจริงและอยู่ในตำแหน่งที่แน่นอน วิธีนี้จึงสามารถขยายไปยังส่วนใดก็ได้ขององค์ประกอบ "พาเรนต์" โดยไม่กระทบต่อเนื้อหา เมื่อต้องการทำเช่นนี้ คุณสามารถใช้คุณสมบัติด้านบน , ขวา , ล่าง , ซ้าย , ความกว้าง และความสูงรวมกันได้

คุณจะได้รับเอฟเฟกต์อะไรบ้าง?

การใช้เพียงองค์ประกอบเดียว คุณจะได้รับพารัลแลกซ์, พื้นหลังหลายแบบ (ทั้งสีและรูปภาพ), ภาพพื้นหลังที่ครอบตัด, การแทนที่รูปภาพ, องค์ประกอบที่ขยายได้พร้อมรูปภาพเป็นโครงร่าง, คอลัมน์เทียมที่ยืดหยุ่น, ภาพที่ขยายเกินขอบเขตขององค์ประกอบ หลายจังหวะและเอฟเฟกต์ยอดนิยมอื่น ๆ ที่โดยทั่วไปจะใช้แท็กรูปภาพและ/หรือมาร์กอัป HTML เพิ่มเติม

ในหน้าสาธิต คุณจะเห็นการใช้งานเอฟเฟกต์การออกแบบหน้าเว็บยอดนิยมหลายอย่างโดยใช้เทคนิคนี้

นอกจากนี้ คุณยังสามารถใช้การเปลี่ยนแปลงสไตล์สำหรับ :hover เพื่อให้ได้เอฟเฟกต์ที่ซับซ้อนมากขึ้น

โค้ดตัวอย่าง: ภาพพื้นหลังหลายรูป

เมื่อใช้เทคนิคนี้ คุณสามารถสร้างเอฟเฟกต์พารัลแลกซ์ด้วยภาพพื้นหลังหลายรูป (ดังที่ใช้ในไซต์ Silverback) โดยใช้องค์ประกอบ HTML เพียงองค์ประกอบเดียว

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

#silverback ( ตำแหน่ง: ญาติ; z-index: 1; ความกว้างขั้นต่ำ: 200px; ความสูงขั้นต่ำ: 200px; การขยาย: 120px 200px 50px; พื้นหลัง: # d3ff99 url (vines-back.png) -10% 0 ซ้ำ-x ; )

องค์ประกอบหลอกทั้งสองอยู่ในตำแหน่งที่แน่นอนและวางไว้ที่ด้านข้างขององค์ประกอบ ความหมาย ดัชนี z เท่ากัน-1 วางองค์ประกอบหลอกไว้ด้านหลังเลเยอร์ เนื้อหา- ด้วยวิธีนี้ องค์ประกอบหลอกจะถูกวางไว้ด้านบนของพื้นหลังและโครงร่างขององค์ประกอบ แต่เนื้อหาทั้งหมดยังคงสามารถเลือกได้และไวต่อการคลิกเมาส์

#silverback:before, #silverback:after ( ตำแหน่ง:สัมบูรณ์; z-index:-1; top:0; ซ้าย:0; ขวา:0; ด้านล่าง:0; padding-top:100px; )

องค์ประกอบหลอกแต่ละองค์ประกอบมีชุดภาพพื้นหลังที่ซ้ำกัน หากต้องการสร้างเอฟเฟกต์พารัลแลกซ์ คุณไม่จำเป็นต้องมีสิ่งอื่นใดอีก

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

#silverback:before ( เนื้อหา:url(gorilla-1.png); padding-left:3%; text-align:left; พื้นหลัง:transparent url(vines-mid.png) 300% 0 ซ้ำ-x; ) #silverback :หลัง ( เนื้อหา:url(gorilla-2.png); padding-right:3%; text-align:right; พื้นหลัง:transparent url(vines-front.png) 70% 0 ซ้ำ-x; )

โค้ดตัวอย่าง: คอลัมน์เทียมแบบยืดหยุ่น

การประยุกต์ใช้เทคนิคที่อธิบายไว้อีกประการหนึ่งคือการสร้างคอลัมน์ที่ยืดหยุ่น ความสูงเท่ากันโดยไม่ต้องใช้รูปภาพหรือองค์ประกอบที่เกี่ยวข้องเพิ่มเติม

มาร์กอัป HTML นั้นง่ายมาก เราใช้ชั้นเรียนสำหรับทุกคน องค์ประกอบ divแทน ตัวเลือก CSS 2.1 ซึ่ง IE6 ไม่รองรับ หากไม่จำเป็นต้องรองรับ IE6 ก็สามารถใช้ตัวเลือกได้

คอนเทนเนอร์มีความกว้างระบุเป็นเปอร์เซ็นต์ ตำแหน่งสัมพัทธ์และค่าคุณสมบัติดัชนี z ที่เป็นค่าบวก การใช้ overflow:hidden ช่วยให้องค์ประกอบห่อเนื้อหาของลูกที่ลอยอยู่และซ่อนองค์ประกอบหลอกที่ยื่นออกมา สีพื้นหลังเป็นสีสำหรับคอลัมน์ใดคอลัมน์หนึ่ง

#faux ( ตำแหน่ง:ญาติ; z-index:1; ความกว้าง:80%; ระยะขอบ:0 อัตโนมัติ; ล้น:ซ่อน; พื้นหลัง:#ffaf00; )

การใช้การวางตำแหน่งสัมพัทธ์สำหรับองค์ประกอบสืบทอดของ div ช่วยให้คุณสามารถควบคุมลำดับของคอลัมน์ได้ โดยไม่คำนึงถึงลักษณะที่ปรากฏในรูปแบบดั้งเดิม

#faux div ( ตำแหน่ง:ญาติ; ลอย:ซ้าย; ความกว้าง:30%; ) #faux .main (ซ้าย:35%) #faux .supp1 (ซ้าย:-28.5%) #faux .supp2 (ซ้าย:8.5%)

อีกสองคอลัมน์ถูกสร้างขึ้นโดยใช้องค์ประกอบหลอกที่มีพื้นหลัง คุณสามารถใช้รูปภาพเป็นพื้นหลังได้หากจำเป็น

#faux:before, #faux:after ( เนื้อหา:""; ตำแหน่ง:สัมบูรณ์; z-index:-1; บน:0; ขวา:0; ล่าง:0; ซ้าย:33.333%; พื้นหลัง:#f9b6ff; ) # faux:หลัง ( ซ้าย:66.667%; พื้นหลัง:#79daff; )

โค้ดตัวอย่าง: หลายจังหวะ

การจัดเรียงหลายจังหวะจะมีลักษณะเกือบเหมือนกัน การใช้งานช่วยให้คุณสามารถละทิ้งภาพในขณะที่ยังคงรักษาเอฟเฟกต์ไว้ได้

องค์ประกอบต้องมีการวางตำแหน่งสัมพัทธ์และความกว้างของช่องว่างภายในที่เพียงพอเพื่อให้มีเส้นขีดพิเศษที่จะถูกสร้างขึ้นโดยองค์ประกอบหลอก

#borders ( ตำแหน่ง:ญาติ; z-index:1; ช่องว่างภายใน:30px; เส้นขอบ:5px solid #f00; พื้นหลัง:#ff9600; )

องค์ประกอบหลอกจะถูกวางตำแหน่งที่ระยะห่างที่เหมาะสมจากเส้นขอบขององค์ประกอบ โดยวางไว้ใต้เลเยอร์เนื้อหาโดยใช้ดัชนี z เชิงลบ และกำหนดเส้นโครงร่างและพื้นหลังที่ต้องการ

#borders:before ( เนื้อหา:""; ตำแหน่ง:สัมบูรณ์; z-index:-1; top:5px; ซ้าย:5px; ขวา:5px; ด้านล่าง:5px; เส้นขอบ:5px solid #ffea00; พื้นหลัง:#4aa929; ) #borders:หลัง ( เนื้อหา:""; ตำแหน่ง:สัมบูรณ์; z-index:-1; บน:15px; ซ้าย:15px; ขวา:15px; ด้านล่าง:15px; เส้นขอบ:5px ทึบ #00b4ff; พื้นหลัง:#fff; )

การปรับปรุงแบบก้าวหน้าและเบราว์เซอร์รุ่นเก่า

IE6 และ IE7 ไม่รองรับองค์ประกอบหลอก CSS 2.1 และละเว้นการประกาศ all:before และ:after พวกเขาจะไม่นำมาซึ่งการปรับปรุงทั้งหมด แต่จะคงฟังก์ชันการทำงานหลักไว้

ข้อควรระวังเมื่อใช้ Firefox 3.0

Firefox 3.0 รองรับองค์ประกอบหลอก CSS 2.1 แต่ไม่รองรับการวางตำแหน่ง เนื่องจากการรองรับบางส่วนนี้ เอฟเฟกต์ที่ขึ้นอยู่กับคุณสมบัติความกว้างหรือความสูงขององค์ประกอบหลอกอย่างชัดเจนจึงดูแย่มากได้ ไม่มี ทางเลือกอื่นสำหรับ Firefox 3.0 หากคุณใช้คุณสมบัติความกว้างหรือความสูง- บางครั้งการปรับปรุงบางอย่างสามารถทำได้โดยการเพิ่ม display:block ให้กับสไตล์องค์ประกอบหลอก

ก่อนที่จะใช้เทคนิคที่ต้องมีการวางตำแหน่งองค์ประกอบหลอกโดยใช้คุณสมบัติความกว้างหรือความสูง คุณต้องพิจารณาว่าการสนับสนุน Firefox 3.0 นั้นมีความสำคัญเพียงใดและเปอร์เซ็นต์ของผู้ใช้ที่ใช้เบราว์เซอร์นั้น

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

การปรับปรุงด้วย CSS3

ตัวอย่างทั้งหมดที่นำมาใช้ในบทความนี้สามารถปรับปรุงได้โดยใช้ CSS3

การใช้ border-radius , rgba , การแปลงคุณสมบัติและพื้นหลัง CSS3 หลายรายการร่วมกับองค์ประกอบหลอกสามารถเปิดความเป็นไปได้ในการใช้เอฟเฟกต์ที่ซับซ้อนมากขึ้น อย่างไรก็ตาม ช่วงเวลาปัจจุบันไม่มีเบราว์เซอร์ที่รองรับภาพเคลื่อนไหว CSS3 หรือการแปลงสำหรับองค์ประกอบหลอก

อนาคต: องค์ประกอบหลอก CSS3

การปรับปรุงที่แนะนำสำหรับองค์ประกอบหลอก CSS3 (ดูเอกสารโมดูลเนื้อหาที่สร้างและแทนที่ CSS3) รวมถึงองค์ประกอบหลอกที่ถูกผูกไว้ (::before::before), องค์ประกอบหลอกหลายรายการ (::หลัง(2)), การห่อองค์ประกอบหลอก ( : :outside) และความสามารถในการแทรกองค์ประกอบหลอกสำหรับส่วนที่โหลดของเอกสาร (::ทางเลือก)

การเปลี่ยนแปลงดังกล่าวจะเปิดขึ้นในทางปฏิบัติ ความเป็นไปได้ไม่จำกัดเพื่อสร้างเอฟเฟกต์ทุกประเภทด้วยองค์ประกอบเดียวและชุดองค์ประกอบหลอก

• บทช่วยสอน

เราได้สัมผัสถึงความสามารถของโมดูลพื้นหลังและเส้นขอบ CSS3 แล้ว โดยพิจารณาการทำงานกับเงา () วันนี้เราจะพูดถึงอีกเรื่องหนึ่งเล็กน้อย โอกาสที่น่าสนใจ- การใช้ภาพหลายภาพในพื้นหลัง

องค์ประกอบพื้นหลัง

มีสาเหตุหลายประการที่คุณอาจต้องการจัดองค์ประกอบภาพหลายภาพในพื้นหลัง เหตุผลที่สำคัญที่สุดคือ:

• ประหยัดปริมาณการใช้รูปภาพหาก แต่ละภาพโดยรวมแล้วมีน้ำหนักน้อยกว่ารูปภาพที่มีชั้นเรียบและ
• ความต้องการพฤติกรรมที่เป็นอิสระของแต่ละเลเยอร์ เช่น เมื่อใช้เอฟเฟกต์พารัลแลกซ์

อาจมีเหตุผลที่สมเหตุสมผลอื่น ๆ :)

วิธีการแบบคลาสสิก

ดังนั้นเราจึงจำเป็นต้องวางภาพพื้นหลังหลายภาพไว้บนอีกภาพหนึ่ง โดยปกติปัญหานี้จะแก้ไขได้อย่างไร? ง่ายมาก: สำหรับภาพพื้นหลังแต่ละภาพ จะมีการสร้างบล็อกซึ่งกำหนดภาพพื้นหลังที่เกี่ยวข้องไว้ บล็อกจะซ้อนกันหรือวางเรียงกันเป็นแถวโดยมีกฎการวางตำแหน่งที่เหมาะสม นี่เป็นตัวอย่างง่ายๆ:

บล็อกที่มีคลาส "ตกปลา" ข้างใน "นางเงือก" มีไว้เพื่อการสาธิตเท่านั้น

ตอนนี้บางสไตล์:
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing ( height:300px; width:480px; ตำแหน่ง: ญาติ; ) .sample1 .sea ( พื้นหลัง: url(media/sea.png) ทำซ้ำ-x ด้านซ้ายบน; ) .sample1 .mermaid ( พื้นหลัง: url(media/mermaid.svg) ซ้ำ-x ล่างซ้าย; ) .sample1 .fish ( พื้นหลัง: url(media/fish.svg) no-repeat; height:70px; width:100px; left : 30px; top: 90px; ตำแหน่ง: สัมบูรณ์ ) .sample1 .fishing ( พื้นหลัง: url(media/fishing.svg) ไม่ทำซ้ำด้านบนขวา 10px; )

ผลลัพธ์:

ใน ในตัวอย่างนี้พื้นหลังที่ซ้อนกันสามอันและหนึ่งบล็อกที่มีปลาอยู่ถัดจากบล็อก "พื้นหลัง" ตามทฤษฎีแล้ว ปลาสามารถเคลื่อนย้ายได้ เช่น ด้วย โดยใช้จาวาสคริปต์หรือการเปลี่ยน/ภาพเคลื่อนไหว CSS3

อย่างไรก็ตาม ตัวอย่าง ".fishing" นี้ใช้ไวยากรณ์ใหม่สำหรับการวางตำแหน่งพื้นหลัง ซึ่งกำหนดไว้ใน CSS3 เช่นกัน:
พื้นหลัง: url (media/fishing.svg) ไม่ทำซ้ำด้านบนขวา 10px;
ขณะนี้รองรับ IE9+ และ Opera 11+ แต่ Firefox 10 และ Chrome 16 ไม่รองรับ ดังนั้นผู้ใช้เบราว์เซอร์สองตัวสุดท้ายจึงไม่สามารถจับปลาได้

พื้นหลังหลายแบบ

เข้ามาช่วยเหลือ ตัวเลือกใหม่ที่เพิ่มใน CSS3 คือความสามารถในการกำหนดภาพพื้นหลังหลายภาพสำหรับองค์ประกอบเดียว ดูเหมือนว่านี้:

และรูปแบบที่สอดคล้องกัน:
.sample2 .sea ( height:300px; width:480px; ตำแหน่ง: ญาติ; ภาพพื้นหลัง: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea. png"); ตำแหน่งพื้นหลัง: ขวาบน 10px, ซ้ายล่าง, ซ้ายบน; ซ้ำพื้นหลัง: ไม่ซ้ำ, ทำซ้ำ-x, ทำซ้ำ-x ; ) .sample2 .fish ( พื้นหลัง: url("media/fish.svg ") ไม่ทำซ้ำ; ความสูง:70px; ความกว้าง:100px; ซ้าย: 30px; ด้านบน: 90px; ตำแหน่ง: สัมบูรณ์; )
หากต้องการกำหนดหลายภาพ คุณต้องใช้กฎภาพพื้นหลัง โดยแสดงรายการแต่ละภาพโดยคั่นด้วยเครื่องหมายจุลภาค กฎเพิ่มเติมเช่นเดียวกับรายการ คุณสามารถตั้งค่าตำแหน่ง การทำซ้ำ และพารามิเตอร์อื่นๆ สำหรับแต่ละภาพได้ สังเกตลำดับการแสดงรูปภาพ: เลเยอร์จะแสดงรายการจากซ้ายไปขวาจากบนสุดไปล่างสุด

ผลลัพธ์ก็เหมือนกันทุกประการ:

กฎข้อหนึ่ง

หากไม่จำเป็นต้องแยกปลาออกเป็นบล็อกแยกต่างหากสำหรับการปรับเปลี่ยนในภายหลัง คุณสามารถเขียนรูปภาพทั้งหมดใหม่โดยใช้บล็อกเดียวได้ กฎง่ายๆ:

รูปแบบ:
.sample3 .sea ( height:300px; width:480px; ตำแหน่ง: ญาติ; ภาพพื้นหลัง: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish. svg"), url("media/sea.png"); ตำแหน่งพื้นหลัง: ด้านบนขวา 10px, ซ้ายล่าง, 30px 90px, ซ้ายบน; พื้นหลังซ้ำ: ไม่ซ้ำ, ทำซ้ำ-x ; )

ฉันจะไม่แสดงภาพผลลัพธ์ - เชื่อฉันสิ มันเกิดขึ้นพร้อมกับสองภาพด้านบน แต่ให้ความสนใจกับสไตล์อีกครั้งโดยเฉพาะ "การทำซ้ำพื้นหลัง" - ตามข้อกำหนดหากส่วนหนึ่งของรายการในตอนท้ายหายไปเบราว์เซอร์จะต้องทำซ้ำรายการที่ระบุตามจำนวนครั้งที่ต้องการเพื่อให้สอดคล้องกับจำนวน รูปภาพในรายการ

ในกรณีนี้จะเทียบเท่ากับคำอธิบายนี้:
พื้นหลังซ้ำ: ไม่ซ้ำ, ซ้ำ-x, ไม่ซ้ำ, ซ้ำ-x;

สั้นกว่าด้วยซ้ำ

หากคุณจำ CSS 2.1 ได้ มันจะกำหนดความสามารถในการอธิบายภาพพื้นหลังในรูปแบบย่อ หลายภาพแล้วไง? สิ่งนี้ก็เป็นไปได้เช่นกัน:

Sample4 .sea ( height:300px; width:480px; ตำแหน่ง: ญาติ; พื้นหลัง: url("media/fishing.svg") ด้านบนขวา 10px ไม่ซ้ำ, url("media/mermaid.svg") ล่างซ้าย ซ้ำ-x , url("media/fish.svg") 30px 90px ไม่ซ้ำ, url("media/sea.png") ซ้ำ-x )

แต่โปรดทราบว่าตอนนี้คุณไม่สามารถข้ามค่าได้ (เว้นแต่จะตรงกับค่าเริ่มต้น) อย่างไรก็ตาม หากคุณต้องการตั้งค่าสีของภาพพื้นหลัง จะต้องดำเนินการในเลเยอร์สุดท้าย

ภาพแบบไดนามิก

หากองค์ประกอบเป็นแบบคงที่หรือไดนามิกขึ้นอยู่กับขนาดของคอนเทนเนอร์ พื้นหลังหลายแบบจะทำให้การออกแบบเพจง่ายขึ้นอย่างเห็นได้ชัด แต่ถ้าคุณต้องการทำงานกับองค์ประกอบแต่ละส่วนขององค์ประกอบโดยแยกจากจาวาสคริปต์ (ย้าย เลื่อน ฯลฯ) ล่ะ?

นี่คือตัวอย่างจากชีวิต - ธีมที่มีดอกแดนดิไลอันในยานเดกซ์:


หากคุณดูโค้ดคุณจะเห็นสิ่งนี้:

...

บล็อกที่มีคลาส "b-fluff-bg", "b-fluff__cloud" และ "b-fluff__item" มีภาพพื้นหลังที่ทับซ้อนกัน นอกจากนี้ พื้นหลังที่มีเมฆจะเลื่อนอยู่ตลอดเวลา และดอกแดนดิไลออนก็บินผ่านหน้าจอ

สิ่งนี้สามารถเขียนใหม่โดยใช้หลายพื้นหลังได้หรือไม่ โดยหลักการแล้ว ใช่ แต่ขึ้นอยู่กับ 1) การสนับสนุนคุณลักษณะนี้ในเบราว์เซอร์เป้าหมาย และ... 2) อ่านต่อ;)

จะเพิ่มไดนามิกให้กับพื้นหลังหลาย ๆ อันได้อย่างไร? ในสถานการณ์เช่นนี้จะสะดวกที่ในการเป็นตัวแทนภายในเบราว์เซอร์จะกระจายพารามิเตอร์แต่ละรายการของภาพพื้นหลังตามกฎที่เหมาะสม ตัวอย่างเช่น สำหรับการวางตำแหน่ง จะมี "ตำแหน่งพื้นหลัง" และสำหรับการเปลี่ยนแปลง การเปลี่ยนแปลงเพียงเท่านี้ก็เพียงพอแล้ว อย่างไรก็ตาม ยังมีค่าใช้จ่ายสำหรับการใช้ภาพหลายภาพ - กฎนี้ (และภาพที่คล้ายกัน) กำหนดให้คุณระบุตำแหน่งสำหรับพื้นหลังทั้งหมดที่กำหนดไว้สำหรับบล็อกของคุณ และคุณไม่สามารถทำแบบเลือกได้

หากต้องการเพิ่มภาพเคลื่อนไหวให้กับพื้นหลังปลา คุณสามารถใช้โค้ดต่อไปนี้:
$(document).ready(function() ( var sea = $(".sample5 .sea"); var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var นางเงือกX = 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));
fishX = 10 + (5 * Math.sin(t * 0.07));

sea.style.พื้นหลังตำแหน่ง = "บนสุด" + fishY + "px ขวา" + fishX + "px, " + นางเงือกX + "px ล่าง" + fishesX + "px" + fishesY + "px ซ้ายบน";

window.requestAnimFrame (animationLoop);

) แอนิเมชันลูป(); -

ที่ไหน window.requestAnimFrame = (function() ( return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (ฟังก์ชั่น (โทรกลับ) ( window.setTimeout (โทรกลับ, 1,000 / 60 )); ))();อย่างไรก็ตาม แอนิเมชั่นสามารถทำได้โดยใช้ CSS3 Transitions/Animations แต่นี่เป็นหัวข้อสำหรับการอภิปรายแยกต่างหาก

Parallax และการโต้ตอบ

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

แล้วความเข้ากันได้ล่ะ?

ทั้งหมด รุ่นที่ทันสมัย เบราว์เซอร์ยอดนิยมรวมถึง IE9+ รองรับหลายภาพ (คุณสามารถตรวจสอบได้ เช่น ด้วย caniuse)

คุณยังสามารถใช้ Modernizr เพื่อมอบเบราว์เซอร์ที่ไม่รองรับหลายพื้นหลังได้ โซลูชั่นทางเลือก- ตามที่ Chris Coyier เขียนไว้ในโพสต์ของเขาเกี่ยวกับลำดับเลเยอร์เมื่อใช้หลายพื้นหลัง ให้ทำดังนี้:

Multiplebgs body ( /* การประกาศ BG หลายอันที่ยอดเยี่ยมซึ่งอยู่เหนือความเป็นจริงและลูกไก่ไร้เหตุผล */ ) .no-multiplebgs body ( /* laaaaaame fallback */ )
หากคุณสับสนเกี่ยวกับการใช้ JS ในการจัดหา ความเข้ากันได้แบบย้อนหลังคุณสามารถประกาศพื้นหลังได้สองครั้ง แต่ก็มีข้อเสียในรูปแบบที่เป็นไปได้เช่นกัน บูตคู่ทรัพยากร (ขึ้นอยู่กับการดำเนินการ การประมวลผลซีเอสเอสในเบราว์เซอร์เฉพาะ):

/* ทางเลือก bg หลายรายการ */ พื้นหลัง: #000 url(...) ...; /* การประกาศ BG หลายรายการที่ยอดเยี่ยมซึ่งอยู่เหนือความเป็นจริงและลูกไก่ไร้เหตุผล */ url พื้นหลัง(...), url(...), url(...), #000 url(...);

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

ปล. ในหัวข้อ: ฉันอดไม่ได้ที่จะจำบทความมหัศจรรย์เกี่ยวกับ .

แท็ก:

• css3
• พื้นหลังหลายแบบ
• เส้นขอบและพื้นหลัง

เพิ่มแท็ก

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

วิธีการตั้งค่าพื้นหลังหลายรายการใน CSS

เราจะแสดงตัวอย่างที่อาจเป็นประโยชน์ในทางปฏิบัติให้กับคุณ ลองจินตนาการว่าเราต้องวางบล็อกข้อความไว้ในกรอบ กรอบแสดงถึง ไฟล์กราฟิกในรูปแบบ PNG:

ในปัญหานี้ เราไม่ทราบความสูงของข้อความ - เราไม่รู้ว่าข้อความจะพอดีภายในกรอบหรือเกินกว่านั้น เนื่องจากไม่ทราบปริมาณนี้ เราจึงไม่อาจเสี่ยงที่จะใช้การออกแบบเฟรมดั้งเดิมเป็นพื้นหลังได้ จมูก ใช้ CSSเราสามารถทำให้เฟรมนี้ขยายได้ตามต้องการ ในการดำเนินการนี้ คุณจะต้องแบ่งภาพวาดต้นฉบับในโปรแกรมแก้ไขกราฟิกออกเป็นสามส่วน - บน, ล่างและตรงกลาง - และบันทึกแต่ละไฟล์แยกกัน แบบนี้:

ด้านบนของกรอบ

ด้านล่างของกรอบ

ตรงกลางของกรอบ

เราจะสร้างพื้นหลังด้วยภาพที่อยู่ตรงกลางของเฟรมซ้ำไปตามแกน ยในขณะที่ด้านบนและด้านล่างของเฟรมจะไม่ซ้ำกัน มาเพิ่มพื้นหลังทั้งสามให้กับองค์ประกอบ และจดสไตล์ที่จำเป็นอื่นๆ ลงไปด้วย:

กรอบ ( ภาพพื้นหลัง: url(https://goo.gl/tKyzHt), /* ส่วนบนเฟรม */ url(https://goo.gl/SUKymM), /* ด้านล่างของเฟรม */ url(https://goo.gl/Km7HVV); /* ตรงกลางของเฟรม */ ตำแหน่งพื้นหลัง: ตรงกลางด้านบน, /* ตำแหน่งด้านบนของเฟรม */ ตรงกลางด้านล่าง, /* ตำแหน่งด้านล่างของเฟรม */ ตรงกลางด้านบน; /* ตำแหน่งตรงกลางของเฟรม */ พื้นหลังซ้ำ: ไม่ซ้ำ, /* ด้านบนของเฟรมไม่ซ้ำ */ ไม่ซ้ำ, /* ด้านล่างของเฟรมไม่ซ้ำ */ ซ้ำ-y; /* ตรงกลางของกรอบถูกทำซ้ำในแนวตั้ง */ background-size: contains; /* ที่นี่สำหรับพื้นหลังทั้งหมด ค่าเดียวกัน*/ ความสูง: อัตโนมัติ; /* ความสูงของบล็อกขึ้นอยู่กับจำนวนเนื้อหา */ ความกว้าง: 400px; /* ความกว้างของบล็อกได้รับการแก้ไขแล้ว */ padding: 30px; /* ช่องว่างภายในบล็อก */ )

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

ภาพพื้นหลังจะถูกวางตามหลักการของเลเยอร์ - อันหนึ่งอยู่ด้านล่างอีกอัน พื้นหลังที่ระบุเป็นอันดับแรกจะอยู่ที่ชั้นบนสุด พื้นหลังที่สองจะอยู่ใต้เลเยอร์แรก และพื้นหลังที่สามจะอยู่ใต้สองเลเยอร์แรก นั่นเป็นเหตุผลที่เราวางภาพโดยให้ตรงกลางกรอบอยู่ที่ส่วนท้ายสุด - เพื่อไม่ให้ซ้อนทับกับส่วนบนและส่วนล่าง

ถัดไป โค้ดจะตั้งค่าคุณสมบัติตำแหน่งพื้นหลังและพื้นหลังซ้ำสำหรับแต่ละพื้นหลัง (ลำดับเดียวกับการจัดเรียงภาพพื้นหลัง) ใช่ คุณเดาถูก: หากจำเป็น คุณสามารถระบุค่าของคุณสมบัติพื้นหลังอื่น ๆ โดยคั่นด้วยเครื่องหมายจุลภาค และถ้าคุณต้องการใช้ค่าหนึ่งค่ากับพื้นหลังทั้งหมด ให้คุณเขียนค่านั้นตามปกติ (ในกรณีของเราคือ background-size: contains property)

มาดูผลลัพธ์กันดีกว่า:

อย่างที่คุณเห็น เฟรมอยู่ในตำแหน่งที่ถูกต้อง และตอนนี้ก็จัดเฟรมเนื้อหาของบล็อกได้อย่างสวยงาม จะเกิดอะไรขึ้นถ้าเราเพิ่มจำนวนข้อความในบล็อก? มาดูกัน:

ส่วนตรงกลางของเฟรมของเราถูกทำซ้ำในแนวตั้งตามจำนวนครั้งที่ต้องการ ราวกับว่ากำลังขยายความยาวและปรับให้เข้ากับข้อความ นี่คือเอฟเฟ็กต์ที่ไม่สามารถเกิดขึ้นได้หากเราใช้ภาพทึบของเฟรม เรามาเพิ่มข้อความเพิ่มเติมเพื่อความชัดเจน:

แน่นอนว่าคุณสามารถใช้หลายพื้นหลังเพื่อแก้ไขปัญหาอื่นๆ ได้ เราแสดงเพียงตัวอย่างเดียวจากหลายๆ ตัวอย่าง ลองนึกถึงสถานการณ์ของคุณเองและฝึกฝนโดยใช้กลุ่มภาพพื้นหลัง

การใช้สัญกรณ์ชวเลข

คุณสมบัติพื้นหลังยังยอมรับค่าหลายค่า ในกรณีที่ใช้หลายพื้นหลัง การบันทึกแบบย่ออาจสะดวกกว่ามาก เนื่องจากจะทำให้สับสนได้ยาก เรามาแก้ไขโค้ดของเราสำหรับเฟรมกัน:

พื้นหลัง: url(https://goo.gl/tKyzHt) ตรงกลางด้านบน / มีไม่มีการทำซ้ำ, /* ด้านบนของเฟรม */ url(https://goo.gl/SUKymM) ตรงกลางด้านล่าง / มีไม่มีการทำซ้ำ, / * ด้านล่างของเฟรม */ url(https://goo.gl/Km7HVV) ตรงกลางด้านบน / มีทำซ้ำ-y; /* ตรงกลางเฟรม */

ตัวเลือกนี้ดูยุ่งยากน้อยกว่าและเข้าใจง่ายกว่า

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

สิ่งนี้มีประโยชน์ในหลายกรณีและหลายช่วงเวลา โดยเฉพาะอย่างยิ่งการใช้องค์ประกอบหลอกในกรณีนี้ เนื่องจากพารามิเตอร์เหล่านี้มีความยืดหยุ่นมาก

ภาพพื้นหลังมากมาย

เพื่อไม่ให้สร้างบล็อกภายในบล็อก วิธีที่ง่ายที่สุดคือการเพิ่มกฎหนึ่งบรรทัดให้กับองค์ประกอบหลัก จากนั้นจึงได้ ผลลัพธ์ที่ต้องการ- เราสามารถถือว่านี่เป็นตัวเลือกที่กระชับโดยเฉพาะอย่างยิ่งเมื่อไม่จำเป็นต้องเข้าไปอีกครั้ง ซอร์สโค้ด- ทุกอย่างจะเสร็จสิ้นโดยใช้ CSS เพียงอย่างเดียว

Blockimg( พื้นหลัง: url("img/img2.png"),/*พื้นหลังบนสุด จากนั้นตามลำดับ*/ url("img/img3.png"), url("img/img1.jpg"); background-position : ศูนย์กลาง 370px, 120px 150px, ศูนย์กลาง;/*ตำแหน่งของรูปภาพ*/ พื้นหลัง-ซ้ำ: ไม่ซ้ำ;/*รูปภาพซ้ำ*/ สีพื้นหลัง: #444;/*หากจำเป็นต้องใช้สีพื้นหลัง*/ กล่อง-เงา: 0 1px 2px rgba(0, 0, 0, 0.1); ระยะขอบ: 100px อัตโนมัติ 15px; ความกว้าง: 700px; ความสูงขั้นต่ำ: 300px; 370px center, url("img/img3.png") ไม่ทำซ้ำ 120px 150px, url("img/img1.jpg") ไม่ซ้ำตรงกลาง ; ระยะขอบ: 100px อัตโนมัติ 15px; :700px;

คำอธิบาย.ตั้งค่าองค์ประกอบ ภาพพื้นหลังบ่งบอกถึงเส้นทางไปยังที่ตั้งของมัน คั่นด้วยเครื่องหมายจุลภาค เราได้รับโอกาสในการป้อนพื้นหลังอื่นๆ อีกมากมาย ดังที่เห็นในโค้ดด้านบน ลำดับหมายเลขจะเป็นตัวกำหนดว่าภาพใดจะอยู่เหนือกว่าภาพอื่นๆ นั่นคือพื้นหลังแรกจะสูงกว่าพื้นหลังอื่นๆ ทั้งหมด จากนั้นลำดับจะเป็นไปตามหลักการของโปรแกรมแก้ไขกราฟิกทั่วไป

ต่อไปจะระบุ ตัวเลือกเพิ่มเติมผ่าน คุณสมบัติส่วนบุคคล: ตำแหน่ง การทำซ้ำ ขนาด ถ้าจำเป็น ตามด้วยสี โปรดทราบว่าพารามิเตอร์ทั้งหมดเขียนโดยคั่นด้วยเครื่องหมายจุลภาค ในลำดับเดียวกับหมายเลขของรูปภาพ

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

ภาพพื้นหลังผ่านองค์ประกอบหลอก

อย่าลืมเกี่ยวกับ ตัวเลือกอื่นเช่นนี้จึงเป็นองค์ประกอบหลอกก่อนและหลัง มีข้อได้เปรียบเชิงบวกในการใช้งาน - สามารถย้ายรูปภาพเกินขอบขององค์ประกอบได้เพื่อไม่ให้หายไปบนเส้นขอบ แต่อยู่ด้านบนสุด เทคนิคนี้จะมีประโยชน์หากคุณต้องการสร้างเอฟเฟกต์ 3 มิติ

Blockimg( พื้นหลัง: url("img/img1.jpg") ไม่ทำซ้ำ;/*พื้นหลังองค์ประกอบ*/ ตำแหน่ง:สัมพัทธ์;/*พื้นที่การวางตำแหน่ง*/ ระยะขอบ: 200px อัตโนมัติ 15px; ขนาดกล่อง: กรอบขอบ; การขยาย: 25px; width:700px; min-height: 300px; ) .blockimg::before( พื้นหลัง: url("img/img1.png") ไม่ซ้ำตรงกลาง ด้านล่าง: 0; เนื้อหา: ""; ความสูง: 295px; ซ้าย: 0; ตำแหน่ง: สัมบูรณ์;/*ตำแหน่งสัมบูรณ์*/ ขวา: 0; บน: -150px )

คำอธิบาย.ที่จริงแล้วทุกอย่างง่ายมาก องค์ประกอบหลัก ตามปกติตั้งค่าพื้นหลัง ถัดมาเป็นกุญแจสำคัญ ทรัพย์สินตำแหน่ง: ญาติ; ซึ่งกำหนดพื้นที่สำหรับการย้ายองค์ประกอบอื่นที่อยู่ในองค์ประกอบหลักและมีคุณสมบัติ Position:absolute; -

แทนที่จะเป็นองค์ประกอบอื่น แม้ว่าอย่างเป็นทางการแล้วมันจะกลายเป็นพื้นที่ที่แยกจากกัน เราก็ใช้องค์ประกอบหลอก เราให้ตำแหน่งที่แน่นอนและวางไว้ในตำแหน่งที่เราต้องการ