พื้นหลัง CSS

CSS ขององค์ประกอบพื้นหลังใช้เพื่อกำหนดภาพพื้นหลังขององค์ประกอบ.

ในบทวิทยานี้ คุณจะเรียนรู้เรื่องต่อไปนี้:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS background-color

background-color ขององค์ประกอบกำหนดสีพื้นหลังขององค์ประกอบ.

ตัวอย่าง

การตั้งค่าสีพื้นหลังของหน้าเว็บนี้เป็นตัวอย่าง:

body {
  background-color: lightblue;
}

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

ผ่าน CSS สีทั่วไปจะถูกกำหนดด้วยวิธีต่อไปนี้:

  • ชื่อสีที่เป็นไปได้ - ตัวอย่าง "red"
  • ค่าสีสี่หลัก - ตัวอย่าง "#ff0000"
  • ค่า RGB - ตัวอย่าง "rgb(255,0,0)"

โปรดดู CSS ค่าสี，เพื่อได้รับรายชื่อค่าสีที่เป็นไปได้ทั้งหมด.

องค์ประกอบอื่น

คุณสามารถตั้งค่าสีพื้นหลังสำหรับองค์ประกอบ HTML ใดๆ ได้:

ตัวอย่าง

ที่นี่ <h1>、<p> และ <div> จะมีสีพื้นหลังที่ต่างกัน:

h1 {
  background-color: green;
}
div {
  background-color: lightblue;
}
p {
  background-color: yellow;
}

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

ความโปร่งใส / ความโปร่ง

ค่า opacity กำหนดความโปร่งใส/ความโปร่ง ขององค์ประกอบ. ระยะทางค่าคือ 0.0 - 1.0. ค่าที่ต่ำกว่า จะโปร่งใสมากขึ้น:

opacity 1
opacity 0.6
opacity 0.3
opacity 0.1

ตัวอย่าง

div {
  background-color: green;
  opacity: 0.3;
}

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

注意：ใช้ opacity เมื่อคุณกำหนดค่า opacity สำหรับพื้นหลังขององค์ประกอบ ทั้งหมดของเล่นย่อยขององค์ประกอบนั้นจะสืบทอดค่า opacity เดียวกัน. นี่อาจทำให้ข้อความที่อยู่ในองค์ประกอบที่โปร่งใสทั้งหมดเป็นไปยังที่ยากที่จะอ่าน:

ความโปร่งใส RGBA

หากคุณไม่ต้องการให้ตัวเล่นย่อยมีความโปร่งใส เช่นตัวอย่างด้านบน ใช้ RGBA ค่าสีสี.ตัวอย่างด้านล่างนี้ตั้งค่าสีพื้นหลังแทนความโปร่งใสของข้อความ:

100% ความโปร่งใส
60% ความโปร่งใส
30% ความโปร่งใส
10% ความโปร่งใส

คุณสามารถหาข้อมูลจาก สี CSS บทที่เราได้เรียนรู้ในช่องที่นี้เป็นสี นอกจาก RGB แล้ว ยังสามารถใช้ RGB สีกับ alpha ช่องที่ใช้ร่วมกัน (RGBA) - ช่องนี้กำหนดความโปร่งใสของสี

RGBA สีที่กำหนดเป็น：rgba(red, green, blue, alpha)。alpha ตัวเลขที่อยู่ในระหว่าง 0.0 (แบบโปร่งใสที่สุด) และ 1.0 (แบบไม่โปร่งใสอย่างเต็มที่)

คำแนะนำ:คุณสามารถพบข้อมูลเพิ่มเติมใน สี CSS ในบทที่นี้เราได้เรียนรู้เกี่ยวกับ RGBA สีมากขึ้น

ตัวอย่าง

div {
  background: rgba(0, 128, 0, 0.3) /* 30% ความโปร่งใสของสีเขียว */
}

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