เมื่อเราศึกษารูปแบบของเว็บไซต์อื่นๆ เรามักจะพบสถานการณ์ที่มีการใช้รูปภาพเดียวกันในแอตทริบิวต์พื้นหลังจำนวนมาก เพื่อตอบสนองการใช้งานส่วนต่างๆ ของหน้าเว็บ หากเปิดภาพลักษณะนี้ขึ้นมาดูจะพบว่าภาพนี้มีภาพเล็กๆ มากมาย เช่น
อีกตัวอย่างหนึ่ง:
รูปภาพขนาดเล็กเหล่านี้เป็นส่วนต่างๆ หลังจากแบ่งรูปภาพทั้งหมดแล้ว แต่ละส่วนจะถูกวางไว้บนรูปภาพเดียว แทนที่จะจัดเก็บเป็นรูปภาพแยกกัน เราทุกคนทราบดีว่าจุดประสงค์ คือเพื่อลดจำนวนคำขอ http และประหยัดเวลาและแบนด์วิธ
แล้วจะรู้ได้อย่างไรว่ามีเพียงส่วนหนึ่งของรูปภาพเท่านั้นที่แสดงในตำแหน่งที่แตกต่างกัน สิ่งนี้ใช้ปัญหาการวางตำแหน่งของภาพ พื้นหลัง ที่เราจะพูดถึงในวันนี้ ฉันเชื่อว่าหลายๆ คนรู้สึกหดหู่กับปัญหานี้ และเพื่อนๆ มักจะถามฉัน ดังนั้นวันนี้ฉันจะอธิบายมันอย่างเป็นระบบ:
เรารู้ว่าเมื่อใช้รูปภาพเป็นพื้นหลัง CSS ควรเขียนแบบนี้ ใช้คอนเทนเนอร์ div เป็น ตัวอย่างเช่น อาจเป็นเนื้อหาก็ได้ พื้นหลังของ td, p ฯลฯ ก็เหมือนกัน
รหัส: div{ พื้นหลัง: #FFF url(image) no-repeat fixed xy;} |
ค่าแอตทริบิวต์พื้นหลังที่นี่คือ:
#FFF สีพื้นหลัง: (ค่าสี ตำแหน่งที่ไม่ครอบคลุมภาพพื้นหลัง หรือเมื่อมี ไม่มีสีพื้นหลังของภาพพื้นหลัง)
ภาพพื้นหลัง: (นี่คือที่อยู่ของภาพ)
ไม่ว่าจะไม่ทำซ้ำหรือไม่: (เมื่อรูปภาพมีขนาดเล็กกว่าขนาดของคอนเทนเนอร์รูปภาพจะถูกจัดเรียงซ้ำ ๆ เพื่อเติมเต็มคอนเทนเนอร์ตามค่าเริ่มต้น การไม่ซ้ำหมายถึงไม่มีการทำซ้ำเฉพาะในเวลานี้เท่านั้นที่พิกัดตำแหน่งที่ตามมาจะถูก มีประโยชน์.)
ไม่ว่าพื้นหลังคงที่จะเลื่อนไปพร้อมกับคอนเทนเนอร์หรือไม่: (มีสองค่าที่เป็นทางเลือก คือ การเลื่อนแบบเลื่อน แบบคงที่ไม่เลื่อน ค่าเริ่มต้นคือการเลื่อน)
การวางตำแหน่งภาพพื้นหลัง xy: (โปรดทราบว่าการวางตำแหน่งมีความหมายเฉพาะภายใต้การไม่ทำซ้ำ นี่คือจุดสนใจของวันนี้)
เราต้องชี้แจงบางจุดในการวางตำแหน่งภาพพื้นหลัง:
1. ค่าแรกจากสองค่า คือการวางตำแหน่งแนวนอน เราเรียกว่าการวางตำแหน่งแกน x ค่าหลังคือการวางตำแหน่งตามยาว ซึ่งเราเรียกว่าการวางตำแหน่งแกน y หากมีเพียงค่าเดียว ค่าเริ่มต้นคือทิศทางของแกน x ในขณะนี้ ทิศทางของแกน y จะมีค่าเริ่มต้นในการจัดแนวขึ้นและลงซึ่งเป็นศูนย์กลาง
2. ต้นกำเนิดของแกนพิกัดคือ จุดยอดด้านซ้าย ของคอนเทนเนอร์ที่เกี่ยวข้อง
3. ลูกศรแกน y ของพิกัดนี้ชี้ลง กล่าวคือ ค่า xy ที่มุมขวาล่าง (ภายในคอนเทนเนอร์) ล้วนเป็นค่าบวก
4. ค่า xy แสดงถึงค่าของจุดยอดด้านซ้ายของภาพพื้นหลังตามลำดับโดยสัมพันธ์กับแหล่งกำเนิดพิกัด (นั่นคือจุดยอดด้านซ้ายของคอนเทนเนอร์)
5. ค่า xy สามารถแสดงเป็นเปอร์เซ็นต์หรือ px
6. xy สามารถแสดงได้ด้วยวิธีการจัดตำแหน่งห้าวิธี ได้แก่ "ซ้าย ขวา บน ล่าง กึ่งกลาง" แต่หมายเหตุ: เมื่อแสดงด้วย "ซ้าย ขวา บน ล่าง กลาง" กฎการจัดตำแหน่งจะถูกนำมาใช้ แทน กว่ากฎการประสานงาน เมื่อ x อยู่ทางซ้าย แสดงว่าด้านซ้ายของรูปภาพอยู่ในแนวเดียวกับด้านซ้ายของคอนเทนเนอร์ เมื่ออยู่ทางขวา แสดงว่าด้านขวาของรูปภาพอยู่ในแนวเดียวกับด้านขวาของคอนเทนเนอร์ เมื่อ y อยู่ด้านบน หมายความว่าด้านบนของรูปภาพอยู่ในแนวเดียวกับด้านบนของคอนเทนเนอร์ เมื่อ xy เท่ากับกึ่งกลาง มันหมายถึงการจัดตำแหน่งกึ่งกลาง
7. เมื่อ xy แสดงเป็นเปอร์เซ็นต์หรือ px ค่าของมันอาจเป็นจำนวนลบได้ เราสามารถเข้าใจความหมายของจำนวนลบได้อย่างง่ายดายโดยใช้กฎพิกัด เมื่อ x เป็นจำนวนลบ แสดงว่าจุดยอดด้านซ้ายของรูปภาพอยู่ทางด้านซ้ายของจุดยอดด้านซ้ายของคอนเทนเนอร์ เมื่อ y เป็นจำนวนลบ หมายความว่าจุดยอดด้านซ้ายของรูปภาพอยู่เหนือจุดคงที่ด้านซ้ายของคอนเทนเนอร์ นั่นคือไปทางซ้ายและขึ้นเกินขอบเขตของคอนเทนเนอร์
ด้านล่างนี้ฉันใช้ภาพประกอบบางส่วนเพื่อแสดงสถานการณ์ต่างๆ บล็อกสีน้ำเงินแสดงถึงรูปภาพ และกล่องประแสดงถึงคอนเทนเนอร์ (อาจเป็น div, td หรือเนื้อหาโดยตรง) โปรดทราบว่าเราจะเห็นเฉพาะภาพพื้นหลังภายในคอนเทนเนอร์เท่านั้น ฉันใช้สีขาว บ่งบอกส่วนที่มองเห็นได้ และสิ่งที่อยู่นอกเหนือขอบเขตของคอนเทนเนอร์นั้นมองไม่เห็น พิกัดของจุดคงที่ด้านซ้ายของคอนเทนเนอร์คือ (0, 0)
อันแรก ภาพพื้นหลังจัดชิดกับด้านซ้ายบนของเนื้อหา 0px 0px สามารถเขียนเป็นด้านซ้ายบนได้เช่นกัน
ในภาพที่สอง ภาพพื้นหลังอยู่ตรงกลางคอนเทนเนอร์ และพิกัดจุดคงที่เป็นค่าบวก
ในภาพที่สาม ภาพพื้นหลังอยู่ที่ด้านซ้ายบนของคอนเทนเนอร์ และพิกัดจุดคงที่เป็นลบ
------------------------- --------- --------------------------------------------
ณ จุดนี้ เราอาจเข้าใจวิธีการใช้ค่าการวางตำแหน่งในพื้นหลังเพื่อวางตำแหน่งภาพพื้นหลังอย่างแม่นยำ ย้อนกลับไปดูภาพสองภาพที่นำมาใช้ในตอนต้น เราสามารถใช้: การวางตำแหน่งพื้นหลังและมองเห็นได้ภายในคอนเทนเนอร์เท่านั้น . คุณสมบัติในการเรียกบางส่วนของรูปภาพทั้งหมดตามต้องการ
แต่เพื่อความสะดวกในการโทร เราต้องใส่ใจกับกฎเกณฑ์บางประการเมื่อจัดเรียงรูปภาพขนาดเล็กเหล่านี้ เช่น ระยะห่างระหว่างรูปภาพขนาดเล็กมักจะเท่ากับขนาดของคอนเทนเนอร์ที่ใช้เรียกรูปภาพขนาดเล็ก หรือระยะห่างที่ใหญ่กว่า เพื่อจะได้ไม่แสดงในคอนเทนเนอร์ ขอดูรูปที่เราไม่อยากโชว์หน่อยสิ!
นอกจากนี้ หากการวางตำแหน่งใช้เปอร์เซ็นต์ อัลกอริธึมจะค่อนข้างพิเศษ ฉันขอยกตัวอย่าง:
Code: #FFF url(image) no-repeat fixed 50% -30%; |
At
this time, the image should be in the container?
ของจุดยอดด้านซ้ายของรูปภาพจากจุดยอดด้านซ้ายของคอนเทนเนอร์สำหรับ
x: (ความกว้างของคอนเทนเนอร์ - ความกว้างของภาพ) x50%
y: (ความสูงของคอนเทนเนอร์ - ความสูงของภาพ) x (-30%)
ผลลัพธ์ที่ได้จะใช้กฎพิกัด หากความแตกต่างเป็นลบและเปอร์เซ็นต์เป็นบวก ผลลัพธ์ของการดำเนินการจะเป็นลบ หากผลต่างเป็นลบและเปอร์เซ็นต์เป็นลบ ผลลัพธ์จะเป็นค่าบวก โดยรวมแล้ว การดำเนินการที่นี่เป็นไปตามอัลกอริทึม โดยการนำผลลัพธ์ของการดำเนินการมาไว้ในกฎพิกัด คุณจะได้ตำแหน่งของรูปภาพ
ตัวอย่างเช่น: คอนเทนเนอร์มีความกว้าง: 600px; ความสูง: 600px; และรูปภาพมีความกว้าง: 200px;
เมื่อใช้สไตล์ข้างต้น เราจะได้ตำแหน่งรูปภาพดังนี้:
x: (600px-200px)*50%
ใช่: (600px-200px)*(-30%)
ดังที่แสดงด้านล่าง:
