พื้นหลัง CSS
คุณสมบัติพื้นหลัง CSS ใช้เพื่อเพิ่มเอฟเฟกต์พื้นหลังสำหรับองค์ประกอบ
ในบทเหล่านี้ คุณจะได้เรียนรู้เกี่ยวกับคุณสมบัติพื้นหลัง CSS ต่อไปนี้:
-
background-color
-
background-image
-
background-repeat
-
background-attachment
-
background-position
-
background
(ทรัพย์สินชวเลข)
CSS พื้นหลังสี
คุณสมบัติbackground-color
ระบุสีพื้นหลังขององค์ประกอบ
ตัวอย่าง
สีพื้นหลังของหน้าถูกตั้งค่าดังนี้:
body {
background-color: lightblue;
}
ด้วย CSS สีมักถูกกำหนดโดย:
- ชื่อสีที่ถูกต้อง เช่น "สีแดง"
- ค่า HEX - เช่น "#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 ยิ่งค่าต่ำยิ่งโปร่งใส:
ความทึบ 1
ความทึบ 0.6
ความทึบ 0.3
ความทึบ 0.1
ตัวอย่าง
div {
background-color: green;
opacity: 0.3;
}
หมายเหตุ:เมื่อใช้opacity
คุณสมบัติเพื่อเพิ่มความโปร่งใสให้กับพื้นหลังขององค์ประกอบ องค์ประกอบย่อยทั้งหมดจะสืบทอดความโปร่งใสเดียวกัน ซึ่งจะทำให้ข้อความภายในองค์ประกอบที่โปร่งใสทั้งหมดอ่านยาก
ความโปร่งใสโดยใช้ RGBA
หากคุณไม่ต้องการใช้ความทึบกับองค์ประกอบย่อย เช่นในตัวอย่างด้านบน ให้ใช้ค่าสีRGBA ตัวอย่างต่อไปนี้ตั้งค่าความทึบสำหรับสีพื้นหลังไม่ใช่ข้อความ:
ความทึบ 100%
ความทึบ 60%
ความทึบ 30%
ความทึบ 10%
คุณได้เรียนรู้จากCSS Colours Chapter ของเรา แล้วว่าคุณสามารถใช้ RGB เป็นค่าสีได้ นอกจาก RGB แล้ว คุณสามารถใช้ค่าสี RGB กับ ช่อง อัลฟา (RGB A ) ซึ่งระบุความทึบของสี
ค่าสี RGBA ระบุด้วย: rgba(red, green, blue, alpha ) พารามิเตอร์ อัลฟาเป็น ตัวเลขระหว่าง 0.0 (โปร่งใสทั้งหมด) ถึง 1.0 (ทึบเต็มที่)
เคล็ดลับ:คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับ RGBA Colors ในCSS Colours Chapterของเรา
ตัวอย่าง
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}