The CSS Podcast - 053: Background
เบื้องหลังกล่อง CSS แต่ละกล่องคือเลเยอร์เฉพาะที่เรียกว่าเลเยอร์พื้นหลัง CSS มีวิธีต่างๆ ในการทําการเปลี่ยนแปลงที่มีประโยชน์ รวมถึงอนุญาตให้ใช้พื้นหลังหลายแบบ
เลเยอร์พื้นหลังอยู่ห่างจากผู้ใช้มากที่สุด โดยจะแสดงผลอยู่หลังเนื้อหาของกล่องโดยเริ่มจากบริเวณ padding-box
วิธีนี้ช่วยให้เลเยอร์พื้นหลังไม่ทับซ้อนกับขอบเลย
สีพื้นหลัง
เอฟเฟกต์ที่ง่ายที่สุดอย่างหนึ่งที่คุณใช้กับเลเยอร์พื้นหลังได้คือการตั้งค่าสี ค่าเริ่มต้นของ background-color
คือ transparent
ซึ่งช่วยให้เนื้อหาของรายการหลักปรากฏ สีที่ถูกต้องซึ่งกำหนดไว้ในเลเยอร์พื้นหลังจะอยู่หลังสิ่งอื่นๆ ที่วาดในองค์ประกอบนั้น
ภาพพื้นหลัง
คุณสามารถเพิ่มรูปภาพพื้นหลังบนเลเยอร์ background-color
โดยใช้พร็อพเพอร์ตี้ background-image
background-image
ยอมรับสิ่งต่อไปนี้
- URL รูปภาพหรือ URI ของข้อมูลโดยใช้ฟังก์ชัน CSS
url
- รูปภาพที่สร้างขึ้นแบบไดนามิกโดยฟังก์ชัน CSS แบบไล่ระดับ
การตั้งค่า background-image ด้วยฟังก์ชัน CSS url
พื้นหลังแบบไล่ระดับสี CSS
ฟังก์ชัน gradient ของ CSS มีอยู่หลายรายการที่ให้คุณสร้างพื้นหลังได้เมื่อส่งผ่านสีตั้งแต่ 2 สีขึ้นไป
ไม่ว่าจะใช้ฟังก์ชันไล่ระดับสีใด รูปภาพที่ได้จะปรับขนาดโดยอัตโนมัติให้ตรงกับพื้นที่ว่างที่มีอยู่
ตัวอย่างการใช้ background-image โดยใช้ฟังก์ชันการไล่ระดับสี
ภาพพื้นหลังที่ซ้ำกัน
โดยค่าเริ่มต้น รูปภาพพื้นหลังจะแสดงซ้ำในแนวนอนและแนวตั้งเพื่อเติมเต็มพื้นที่ทั้งหมดของเลเยอร์พื้นหลัง
เปลี่ยนค่านี้โดยใช้พร็อพเพอร์ตี้ 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
ยังมีตัวย่อแบบค่าเดียวที่สะดวกอีกด้วย โดยค่าที่ละเว้นจะเปลี่ยนเป็น 50%
ต่อไปนี้คือตัวอย่างที่แสดงให้เห็นโดยใช้คีย์เวิร์ดที่พร็อพเพอร์ตี้ background-position
ยอมรับ
นอกจากรูปแบบพารามิเตอร์เริ่มต้น 2 รายการและรูปแบบพารามิเตอร์เดียวแล้ว พร็อพเพอร์ตี้ 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%
กับ background-image ระบบจะวาง background-image ที่ 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
ประกาศใดต่อไปนี้ถูกต้อง
background-position: right bottom
background-position: left
background-position: top right 33%
background-position: 50% left
วิธีตั้งค่าให้ภาพพื้นหลังคงที่ภายในวิวพอร์ตที่คุณใช้
background-attachment: scroll
background-attachment: fixed
background-fixed-to-viewport: true
background-position: fixed
ค่าเริ่มต้นของ background-origin สำหรับพื้นหลังภายในกล่อง CSS คือ
padding-box
margin-box
content-box
border-box