CSS 多重背景

在本章中，您将学习如何将多个背景图像添加到一个元素。

您还将学到以下属性：

  • background-size
  • background-origin
  • background-clip

CSS 多重背景

CSS 允许您通过 background-image 属性为一个元素添加多幅背景图像。

不同的背景图像用逗号隔开，并且图像会彼此堆叠，其中的第一幅图像最靠近观看者。

下面的例子有两幅背景图像，第一幅图像是花朵（与底部和右侧对齐），第二幅图像是纸张背景（与左上角对齐）：

ตัวอย่าง

#example1 {
  background-image: url(flower.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
}

ทดลองด้วยตัวเอง

多重背景图像可以使用单独的背景属性（如上所述）或 background 属性缩写来指定。

下面的例子使用 background 属性缩写（結果與上例相同）：

ตัวอย่าง

#example1 {
  background: url(flower.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}

ทดลองด้วยตัวเอง

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

CSS background-size ตัวแปรนี้อนุญาตให้คุณกำหนดขนาดภาพพื้นหลัง。

สามารถกำหนดขนาดภาพพื้นหลังด้วยความยาว ขนาดเปอร์เซ็น หรือใช้คำว่าที่กำหนดด้านล่างนี้:;contain หรือ cover.

ตัวอย่างด้านล่างนี้จะปรับขนาดภาพพื้นหลังเล็กกว่าภาพต้นฉบับมาก (ใช้ pixel):;

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

นี่คือรหัส:;

ตัวอย่าง

#div1 {
  background: url(img_flower.jpg);
  background-size: 100px 80px;
  background-repeat: no-repeat;
}

ทดลองด้วยตัวเอง

background-size ค่าที่อาจมีอีกสองตัวเลขคือ contain และ cover.

contain จะย่อยภาพพื้นหลังให้ใหญ่ที่สุดที่เป็นไปได้ (แต่ความกว้างและความสูงของภาพพื้นหลังต้องเข้ากับบริเวณเนื้อหา) ซึ่งอาจมีบางส่วนของพื้นหลังที่ไม่ถูกภาพพื้นหลังทับครอบ。

cover คำว่าที่จะย่อยภาพพื้นหลังให้เข้ากับบริเวณเนื้อหา โดยความกว้างและความสูงของภาพพื้นหลังเท่ากับหรือมากกว่าบริเวณเนื้อหา ซึ่งอาจมีบางส่วนของภาพพื้นหลังที่ไม่มีที่ดูในบริเวณที่ตั้งตำแหน่งภาพพื้นหลัง。

ตัวอย่างด้านล่างแสดง contain และ cover การใช้งาน:;

ตัวอย่าง

#div1 {
  background: url(img_flower.jpg);
  background-size: contain;
  background-repeat: no-repeat;
}
#div2 {
  background: url(img_flower.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

ทดลองด้วยตัวเอง

กำหนดขนาดภาพพื้นหลังหลายภาพ

ในการจัดการภาพพื้นหลังหลายภาพ,;background-size ตัวแปรนี้ยังสามารถรับค่าหลายตัวเลขที่กำหนดขนาดภาพพื้นหลัง (ใช้ comma แบ่งรายการ) ได้;

ตัวอย่างด้านล่างนี้กำหนดภาพพื้นหลังสามภาพ ซึ่งมีค่า background-size ต่างกัน:;

ตัวอย่าง

#example1 {
  background: url(tree.png) left top no-repeat, url(flower.gif) right bottom no-repeat,; 
  	url(paper.gif) left top repeat;
  background-size: 50px, 130px, auto;
}

ทดลองด้วยตัวเอง

ภาพ배경ขนาดเต็ม

ตอนนี้เราต้องการให้ภาพ배경ของเว็บไซต์ทั้งหมดเซ็นเตอร์ของหน้าต่างนอร์มัลของเว็บเบราส์ทั้งหมด。

ความต้องการเช่นนี้คือ:

  • ใช้ภาพที่ครอบคลุมทั้งหมดของหน้าเว็บ (ไม่มีช่องว่าง)
  • ขยายภาพตามที่ต้องการ
  • ศูนย์กลางภาพบนหน้าเว็บ
  • ไม่สร้างลูกศอก

ตัวอย่างด้านล่างแสดงวิธีที่จะทำได้: ใช้องค์ประกอบ<html> (องค์ประกอบ<html>เป็นความสูงของหน้าต่างนอร์มัลของเว็บเบราส์) และกำหนดภาพ배경ที่คงที่และศูนย์กลางบนเข้าไปด้วย background-position: center; สุดท้ายก็ใช้คุณสมบัติ background-size ที่ความยาว, ความสูง และ auto สำหรับการปรับขนาด:

ตัวอย่าง

html {
  background: url(img_man.jpg) no-repeat center fixed; 
  background-size: cover;
}

ทดลองด้วยตัวเอง

Hero Image

คุณยังสามารถใช้คุณสมบัติbackgroundของ<div>เพื่อสร้าง Hero Image (ภาพใหญ่ที่มีข้อความ) และจัดใส่ในตำแหน่งที่คุณต้องการ。

ตัวอย่าง

.hero-image {
  background: url(img_man.jpg) no-repeat center; 
  background-size: cover;
  height: 500px;
  position: relative;
}

ทดลองด้วยตัวเอง

CSS background-origin คุณสมบัติ

CSS background-origin คุณสมบัตินี้กำหนดตำแหน่งของภาพ배경

คุณสมบัตินี้ยอมรับค่าสามค่าต่างๆ

  • border-box - ภาพ배경เริ่มต้นจากมุมบนของเส้นขอบ
  • padding-box - ภาพ배경เริ่มต้นจากขอบประตูด้านบนของระยะทาง (ค่าเริ่มต้น)
  • content-box - ภาพ배경เริ่มต้นจากมุมบนของเนื้อหา

ตัวอย่างด้านล่างแสดง background-origin รายละเอียด

ตัวอย่าง

#example1 {
  border: 10px solid black;
  padding: 35px;
  background: url(flower.gif);
  background-repeat: no-repeat;
  background-origin: content-box;
}

ทดลองด้วยตัวเอง

CSS background-clip คุณสมบัติ

CSS background-clip คุณสมบัตินี้กำหนดพื้นที่ที่วาดภาพ배경

คุณสมบัตินี้ยอมรับค่าสามค่าต่างๆ

  • border-box - วาดภาพ배경จนถึงขอบเขตของเส้นขอบ (ค่าเริ่มต้น)
  • padding-box - วาดภาพ배경จนถึงขอบประตูเนื้อหา (ค่าเริ่มต้น)
  • content-box - วาดภาพ배경ในกล่องเนื้อหา

ตัวอย่างด้านล่างแสดง background-clip รายละเอียด

ตัวอย่าง

#example1 {
  border: 10px dotted black;
  padding: 35px;
  background: yellow;
  background-clip: content-box;
}

ทดลองด้วยตัวเอง

CSS คุณสมบัติพื้นหลังสูง

คุณสมบัติ การอธิบาย
background คุณสมบัติสั้นแบบที่ใช้ในการตั้งค่าคุณสมบัติพื้นหลังทั้งหมดในแถวคำประกาศ
background-clip กำหนดพื้นที่การวาดพื้นหลัง
background-image กำหนดรูปภาพพื้นหลังหนึ่งหรือหลายแบบสำหรับองค์ประกอบ
background-origin กำหนดตำแหน่งการจัดเก็บรูปภาพพื้นหลัง
background-size กำหนดขนาดของรูปภาพพื้นหลัง