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