พื้นหลัง

พอดแคสต์ CSS - 053: เบื้องหลัง

พื้นหลัง

เบื้องหลังช่อง CSS ทุกช่องคือเลเยอร์พิเศษที่เรียกว่าเลเยอร์พื้นหลัง CSS มีวิธีทำการเปลี่ยนแปลงที่มีความหมายกับ CSS หลายวิธี รวมถึงอนุญาตให้มีหลายพื้นหลัง

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

สีพื้นหลัง

เอฟเฟกต์ที่ง่ายที่สุดอย่างหนึ่งที่คุณสามารถใช้กับเลเยอร์พื้นหลังได้คือการตั้งค่าสี ค่าเริ่มต้นของ background-color คือ transparent ซึ่งทำให้ดูเนื้อหาของระดับบนสุดได้ ชุดสีที่ถูกต้องบนเลเยอร์พื้นหลังจะอยู่หลังสิ่งอื่นๆ ที่วาดบนองค์ประกอบนั้น

ภาพพื้นหลัง

ที่ด้านบนของเลเยอร์ background-color คุณสามารถเพิ่มภาพพื้นหลังได้โดยใช้คุณสมบัติ background-image background-image ยอมรับข้อกำหนดต่อไปนี้

• URL ของรูปภาพหรือ URI ข้อมูล โดยใช้ฟังก์ชัน url ของ CSS
• รูปภาพที่สร้างขึ้นแบบไดนามิกโดยฟังก์ชัน CSS การไล่ระดับสี

การตั้งค่าภาพพื้นหลังด้วยฟังก์ชัน CSS url

พื้นหลังการไล่ระดับสี CSS

ฟังก์ชัน CSS แบบการไล่ระดับสีหลายแบบมีไว้เพื่อให้คุณสร้างภาพพื้นหลังเมื่อส่งผ่านสีตั้งแต่ 2 สีขึ้นไป

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

การสาธิตที่แสดงตัวอย่างการใช้ภาพพื้นหลังโดยใช้ฟังก์ชันการไล่ระดับสี

การใช้ภาพพื้นหลังซ้ำ

โดยค่าเริ่มต้น ภาพพื้นหลังจะแสดงซ้ำในแนวนอนและแนวตั้งเพื่อเติมพื้นที่ทั้งหมดของเลเยอร์พื้นหลัง

เปลี่ยนค่านี้โดยใช้พร็อพเพอร์ตี้ background-repeat กับค่าใดค่าหนึ่งต่อไปนี้

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

พร็อพเพอร์ตี้ background-repeat ให้คุณตั้งค่าพฤติกรรมสำหรับแกน x และ y แยกกันได้ พารามิเตอร์แรกจะกำหนดพฤติกรรมการทำซ้ำในแนวนอน และพารามิเตอร์ที่ 2 จะกำหนดพฤติกรรมการทำซ้ำในแนวตั้ง

หากคุณใช้ค่าเดียว ระบบจะใช้ค่านั้นกับค่าซ้ำทั้งแนวนอนและแนวตั้ง

ชวเลขยังมีตัวเลือกคำเดียวที่ใช้สะดวกเพื่อช่วยให้คุณเข้าใจเจตนาได้อย่างชัดเจน

ค่า repeat-x จะแสดงซ้ำรูปภาพในแนวนอนเท่านั้น ซึ่งเท่ากับ repeat no-repeat

การสาธิตต่อไปนี้แสดงความสามารถเหล่านี้ของพร็อพเพอร์ตี้ background-repeat

ตำแหน่งในเบื้องหลัง

คุณอาจสังเกตเห็นว่ารูปภาพบางรูปในเว็บได้รับการจัดรูปแบบโดยใช้การประกาศ background-repeat: no-repeat รูปภาพดังกล่าวจะปรากฏที่ด้านซ้ายบนของคอนเทนเนอร์

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

เช่นเดียวกับ background-repeat พร็อพเพอร์ตี้ background-position อนุญาตให้คุณจัดตำแหน่งรูปภาพตามแกน x และ y เป็นอิสระจากกันโดยใช้ค่า 2 ค่าโดยค่าเริ่มต้น

เมื่อใช้ความยาวและเปอร์เซ็นต์ CSS พารามิเตอร์แรกจะสอดคล้องกับแกนแนวนอน ส่วนพารามิเตอร์ที่ 2 จะสอดคล้องกับแกนแนวตั้ง

เมื่อใช้คีย์เวิร์ดตามลำดับคีย์เวิร์ดเพียงอย่างเดียวไม่สำคัญ:

background-position: left 50%;

background-position: top left;

background-position: left top;

  background-position: 50% left;

  background-position: left right;

พร็อพเพอร์ตี้ background-position มีค่าชวเลข 1 ค่าที่สะดวก ค่าที่ตัดออกไปจะเปลี่ยนเป็น 50% ต่อไปนี้คือตัวอย่างที่แสดงให้เห็นการใช้คีย์เวิร์ดที่พร็อพเพอร์ตี้ background-position ยอมรับ

นอกเหนือจากรูปแบบพารามิเตอร์ 2 รูปแบบที่เป็นค่าเริ่มต้นและแบบฟอร์มพารามิเตอร์ 1 รูปแบบแล้ว พร็อพเพอร์ตี้ background-position ยังยอมรับพารามิเตอร์สูงสุด 4 รายการด้วย

เมื่อมีการใช้พารามิเตอร์ 3 หรือ 4 รายการ คีย์เวิร์ด top, left, right หรือ bottom จะต้องนำหน้าด้วยคีย์เวิร์ด top, left, right เพื่อให้เบราว์เซอร์คำนวณขอบของช่อง CSS ที่ออฟเซ็ตควรเริ่มต้น

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

background-position: bottom 88% right;

background-position: right bottom 88%;

background-position: 88% bottom right;

background-position: bottom 88% right 33%;

background-position: right 33% bottom 88%;

background-position: 88% 33% bottom left;

หากใช้ background-position: top left 20% กับภาพพื้นหลัง CSS รูปภาพจะอยู่ที่ด้านบนของกล่อง ค่า 20% จะแสดงออฟเซ็ต 20% จากด้านซ้ายของช่อง (บนแกน x)

หากใช้ background-position: top 20% left กับภาพพื้นหลัง CSS ค่า 20% จะแสดงค่าออฟเซ็ต 20% จากด้านบนของกล่อง CSS (บนแกน y) และรูปภาพจะอยู่ทางด้านซ้ายของช่อง

เมื่อใช้พารามิเตอร์ 4 ตัว คีย์เวิร์ด 2 คำจะจับคู่ด้วยค่า 2 ค่าที่ตรงกับค่าชดเชยต้นทางของแต่ละคีย์เวิร์ดที่ระบุ หากใช้ background-position: bottom 20% right 30% กับภาพพื้นหลัง ภาพพื้นหลังจะอยู่ในตำแหน่ง 20% จากด้านล่าง และ 30% จากด้านขวาของช่อง CSS

การสาธิตต่อไปนี้แสดงพฤติกรรมดังกล่าว

ต่อไปนี้คือตัวอย่างเพิ่มเติมของการใช้พร็อพเพอร์ตี้ background-position ที่ใช้ค่า CSS และค่าคีย์เวิร์ดผสมกัน

ขนาดพื้นหลัง

พร็อพเพอร์ตี้ background-size กำหนดขนาดของภาพพื้นหลัง โดยค่าเริ่มต้น ภาพพื้นหลังจะกำหนดขนาดตามความกว้าง ความสูง และสัดส่วนภาพที่แท้จริง (ตามจริง)

พร็อพเพอร์ตี้ background-size ใช้ค่าความยาวและค่าเปอร์เซ็นต์ CSS หรือคีย์เวิร์ดที่เฉพาะเจาะจง คุณสมบัตินี้ยอมรับพารามิเตอร์สูงสุด 2 ตัวที่เกี่ยวข้องเพื่อให้คุณเปลี่ยนความกว้างและความสูงของพื้นหลังได้อย่างอิสระ

พร็อพเพอร์ตี้ background-size ยอมรับคีย์เวิร์ดต่อไปนี้

• auto: เมื่อใช้แยกกัน ภาพพื้นหลังจะมีขนาดตามความกว้างและความสูงที่แท้จริง เมื่อใช้ auto คู่กับค่า CSS อื่นสำหรับความกว้าง (พารามิเตอร์แรก) หรือความสูง (พารามิเตอร์ที่ 2) มิติข้อมูลที่ตั้งค่าเป็น auto จะปรับขนาดตามที่จำเป็นเพื่อรักษาอัตราส่วนตามปกติของรูปภาพ ซึ่งเป็นลักษณะการทำงานเริ่มต้นของพร็อพเพอร์ตี้ background-size
• cover: ครอบคลุมพื้นที่ทั้งหมดของเลเยอร์พื้นหลัง ซึ่งอาจหมายความว่ารูปภาพถูกยืดหรือครอบตัด
• contain: ปรับขนาดรูปภาพให้เต็มพื้นที่โดยไม่ต้องยืดหรือครอบตัด ด้วยเหตุนี้ เนื้อที่ว่างจึงยังคงทำให้รูปภาพทำงานซ้ำได้ เว้นแต่ว่าจะตั้งค่า background-repeat เป็น no-repeat

รหัส 2 แบบหลังมีจุดประสงค์ที่จะใช้แบบสแตนด์อโลนและไม่มีพารามิเตอร์อื่น

การสาธิตต่อไปนี้จะแสดงการทำงานของคีย์เวิร์ดเหล่านี้

สาธิตการใช้คีย์เวิร์ดเหล่านี้กับ background-size:

ไฟล์แนบในเบื้องหลัง

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

ยอมรับคีย์เวิร์ด 3 คำ ได้แก่ scroll, fixed และ local

ลักษณะการทำงานเริ่มต้นของพร็อพเพอร์ตี้ background-attachment คือค่าเริ่มต้น scroll เมื่อจำเป็นต้องใช้พื้นที่มากขึ้น รูปภาพจะย้ายไปตามพื้นที่นั้นภายในเลเยอร์พื้นหลังซึ่งกำหนดโดยขอบเขตของกล่อง CSS

การใช้ค่า fixed จะแก้ไขตำแหน่งของภาพพื้นหลังในวิวพอร์ต

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

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

ต้นทางในเบื้องหลัง

พร็อพเพอร์ตี้ background-origin ให้คุณแก้ไขพื้นที่ของพื้นหลังที่เชื่อมโยงกับช่องหนึ่งๆ ได้ ค่าที่พร็อพเพอร์ตี้ยอมรับจะสอดคล้องกับภูมิภาค border-box , padding-box และ content-box ของช่อง

ลองใช้งานตัวเลือกเหล่านี้โดยใช้การสาธิตต่อไปนี้

คลิปพื้นหลัง

คุณสมบัติ background-clip จะควบคุมสิ่งที่มองเห็นได้จากเลเยอร์พื้นหลังโดยไม่คำนึงถึงขอบเขตที่สร้างโดยพร็อพเพอร์ตี้ background-origin

เช่นเดียวกับ background-origin ภูมิภาคที่ระบุได้คือ border-box, padding-box และ content-box ที่สอดคล้องกับตำแหน่งที่สามารถแสดงเลเยอร์พื้นหลัง CSS ได้ เมื่อใช้คีย์เวิร์ดเหล่านี้ การแสดงผลใดๆ ของพื้นหลังที่ไกลกว่าพื้นที่ที่ระบุจะถูกครอบตัดหรือตัดออก

นอกจากนี้ พร็อพเพอร์ตี้ background-clip ยอมรับคีย์เวิร์ด text ที่ตัดพื้นหลังไว้ไม่เกินข้อความในกล่องเนื้อหา เพื่อให้เอฟเฟกต์นี้แสดงอย่างชัดเจนในข้อความจริงภายในช่อง CSS ข้อความต้องโปร่งใสบางส่วนหรือทั้งหมด

ในขณะที่เขียนบทความนี้ Chrome และเบราว์เซอร์ส่วนใหญ่ต้องมีคำนำหน้า -webkit- เพื่อใช้พร็อพเพอร์ตี้นี้ ซึ่งเป็นพร็อพเพอร์ตี้ที่ค่อนข้างใหม่

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

ตามที่กล่าวไว้ในตอนต้นของโมดูล เลเยอร์พื้นหลังอนุญาตให้มีเลเยอร์ย่อยหลายเลเยอร์ได้ เพื่อความกระชับ ฉันจะเรียกเลเยอร์ย่อยเหล่านี้เป็นพื้นหลัง

ระบบจะกำหนดพื้นหลังหลายแบบจากบนลงล่าง โดยพื้นหลังแบบแรกจะอยู่ใกล้กับผู้ใช้มากที่สุด ส่วนพื้นหลังสุดท้ายจะอยู่ไกลที่สุดจากผู้ใช้

พื้นหลังเพียงชุดเดียวที่กำหนดหรือเลเยอร์สุดท้ายจะถูกกำหนดเป็นเลเยอร์พื้นหลังสุดท้ายโดยเบราว์เซอร์ เฉพาะเลเยอร์นี้เท่านั้นที่ได้รับอนุญาตให้กำหนด background-color

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

background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
    url("https://assets.codepen.io/7518/blob.svg"),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
  background-size: contain, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 10% 50%, 0% 0%;
  background-origin: padding-box, border-box, content-box;

ชวเลขพื้นหลัง

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

background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?

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

การประกาศต่อไปนี้ตัดพื้นหลัง และมาจากกล่องเนื้อหา

background: url("https://assets.codepen.io/7518/blob.svg") 50%
      50% / contain no-repeat content-box;

โดยคำนึงถึงความหมายสั้นๆ เหล่านี้ การประกาศที่เกี่ยวข้องกับพื้นหลังก่อนหน้านี้ของข้อมูลโค้ดอาจเขียนใหม่ให้มีลักษณะดังนี้

background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;

ตรวจสอบความเข้าใจของคุณ

ทดสอบความรู้เกี่ยวกับพื้นหลัง CSS