พื้นหลัง

พอดแคสต์ CSS - 053: ความเป็นมา

พื้นหลัง

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

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

สีพื้นหลัง

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

ภาพพื้นหลัง

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

• URL ของรูปภาพหรือ URL ของข้อมูลที่ใช้ฟังก์ชัน CSS ของ url
• รูปภาพที่สร้างขึ้นแบบไดนามิกโดยฟังก์ชัน 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 รายการ ความยาวหรือเปอร์เซ็นต์ CSS จะต้องอยู่ต่อจากคีย์เวิร์ด top, left, right หรือ bottom เพื่อให้เบราว์เซอร์คำนวณขอบของกล่อง 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