พื้นหลัง

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

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

สีพื้นหลัง

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

ภาพพื้นหลัง

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

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

การตั้งค่า background-image ด้วยฟังก์ชัน CSS url

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

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

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

ตัวอย่างการใช้ background-image โดยใช้ฟังก์ชันการไล่ระดับสี

ภาพพื้นหลังที่ซ้ำกัน

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

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

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

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

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

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

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

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

ตำแหน่งพื้นหลัง

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

คุณอาจสังเกตเห็นว่าเมื่อรูปภาพบางรูปในเว็บมีการจัดสไตล์ด้วยประกาศ 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;

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

ไม่ควรทำ
  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;
ค่าความยาว CSS ต้องขึ้นต้นด้วยคีย์เวิร์ด top, right, bottom หรือ left เมื่อใช้พารามิเตอร์ตั้งแต่ 3 รายการขึ้นไป
ควรทำ
background-position: bottom 88% right 33%;
ควรทำ
background-position: right 33% bottom 88%;
ไม่ควรทำ
background-position: 88% 33% bottom left;
ค่าความยาว CSS ต้องขึ้นต้นด้วยคีย์เวิร์ด top, right, bottom หรือ left เมื่อใช้พารามิเตอร์ตั้งแต่ 3 รายการขึ้นไป

หากใช้ 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 และคีย์เวิร์ดผสมกันมีดังนี้

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

Browser Support

  • Chrome: 3.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

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

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

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

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

ส่วน 2 รายการหลังมีไว้เพื่อใช้งานแบบสแตนด์อโลนโดยไม่มีพารามิเตอร์อื่น

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

ตัวอย่างที่แสดงให้เห็นการใช้คีย์เวิร์ดเหล่านี้กับ background-size

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

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

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

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

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

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

ต้นทางของพื้นหลัง

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 3.

Source

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

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

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

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

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

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

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 4.
  • Safari: 5.

Source

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

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

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

เบราว์เซอร์จะกำหนดพื้นหลังที่กําหนดไว้เพียงพื้นหลังเดียวหรือเลเยอร์สุดท้ายเป็นเลเยอร์พื้นหลังสุดท้าย มีเพียงเลเยอร์นี้เท่านั้นที่ได้รับอนุญาตให้กําหนด 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: 50% left
background-position: right bottom
background-position: left
background-position: top right 33%

วิธีตั้งค่าให้ภาพพื้นหลังคงที่ภายในวิวพอร์ตที่คุณใช้

background-position: fixed
background-fixed-to-viewport: true
background-attachment: scroll
background-attachment: fixed

ค่าเริ่มต้นของ background-origin สำหรับพื้นหลังภายในกล่อง CSS คือ

border-box
content-box
padding-box
margin-box