พอดแคสต์ 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
ภาพพื้นหลังจะอยู่ที่ด้านซ้ายบนของช่อง CSS
background-position
อย่างชัดเจนเพื่อเปลี่ยนตำแหน่งเริ่มต้นของภาพพื้นหลัง ทั้งนี้ขึ้นอยู่กับขนาดภายในรูปที่อาจไม่อยู่ในตำแหน่งที่มุมซ้ายบนของช่อง CSS
ตามค่าเริ่มต้น ภาพพื้นหลังจะไม่ซ้ำกัน
background-repeat: no-repeat
อย่างชัดเจนเพื่อไม่ให้ใช้ภาพพื้นหลังซ้ำ นอกจากนี้ ยังใช้ background-repeat: repeat-x
และ background-repeat: repeat-y
เพื่อป้องกันไม่ให้เกิดขึ้นซ้ำในแกนที่ต้องการได้
การประกาศ background-position
ข้อใดต่อไปนี้ถูกต้อง
background-position: 50% left
background-position: top right 33%
background-position: right bottom
background-position: left
วิธีตั้งค่าภาพพื้นหลังให้คงที่ภายในวิวพอร์ตที่คุณใช้
background-position: fixed
background-position
"
background-fixed-to-viewport: true
background-fixed-to-viewport
ยังไม่มีอยู่ใน CSS
background-attachment: fixed
background-attachment: fixed
กำหนดภาพพื้นหลังที่จะคงที่ภายในวิวพอร์ตปัจจุบันอย่างชัดแจ้ง
background-attachment: scroll
background-attachment
เป็นพร็อพเพอร์ตี้ที่ใช้เพื่อตั้งค่าภาพพื้นหลังที่จะคงที่ภายในวิวพอร์ต อย่างไรก็ตาม scroll
เป็นค่าเริ่มต้นสำหรับพร็อพเพอร์ตี้ที่แก้ไขภาพพื้นหลังโดยค่าเริ่มต้นในช่องที่ไม่ได้รับผลกระทบจากเนื้อหาภายในช่อง"
ต้นทางเริ่มต้นของพื้นหลังภายในกล่อง CSS คือ
content-box
background-origin
แต่ไม่ใช่ค่าเริ่มต้น
border-box
background-origin
และเส้นขอบที่จัดเตรียมไว้ล่วงหน้าสามารถวาดทับบนพื้นหลังได้ แต่ไม่ใช่ค่าเริ่มต้น
padding-box
background-origin
อนุญาตให้แสดงพื้นหลังได้เกินเนื้อหาและเห็นจนถึงขอบของช่อง
margin-box
background-origin