คุณสมบัติของพื้นหลัง CSS ที่ใช้ในการกำหนดผลกระทบพื้นหลังสำหรับองค์ประกอบ
คุณสมบัติพื้นหลัง CSS:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
สีพื้นหลัง
background-color ของสถานที่ให้ระบุสีพื้นหลังขององค์ประกอบ
สีพื้นหลังของหน้าเว็บที่มีการตั้งค่าเช่นนี้
ด้วย CSS, สีส่วนใหญ่มักจะมีการระบุโดย:
- ชื่อสีที่ถูกต้อง - เหมือน "red"
- ค่า HEX - เหมือน "#ff0000"
- ค่า RGB - เหมือน "rgb(255,0,0)"
ดู CSS ค่าสี สำหรับรายการที่สมบูรณ์ของค่าสีที่เป็นไปได้
ในตัวอย่างด้านล่างนี้ <h1>, <p> และ <div> องค์ประกอบมีสีพื้นหลังที่แตกต่างกัน
ตัวอย่าง
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
} ลองตัวเอง» ภาพพื้นหลัง
background-image คุณสมบัติระบุภาพที่จะใช้เป็นพื้นหลังของธาตุนั้น
โดยค่าเริ่มต้นภาพที่ซ้ำแล้วซ้ำอีกเพื่อให้ครอบคลุมองค์ประกอบทั้งหมด
ภาพพื้นหลังสำหรับหน้าสามารถตั้งค่าได้เช่นนี้
ด้านล่างนี้เป็นตัวอย่างของการรวมกันที่ไม่ดีของข้อความและพื้นหลังภาพ ข้อความที่แทบจะไม่สามารถอ่านได้:
 | หมายเหตุ: เมื่อใช้ภาพพื้นหลังใช้ภาพที่ไม่รบกวนข้อความที่ |
|---|
ภาพพื้นหลัง - ทำซ้ำแนวนอนหรือแนว
โดยค่าเริ่มต้น background-image คุณสมบัติซ้ำภาพทั้งแนวนอนและแนวตั้ง
ภาพบางภาพควรจะซ้ำเฉพาะในแนวนอนหรือแนวตั้งหรือพวกเขาจะมีลักษณะที่แปลกประหลาดเช่นนี้
หากภาพดังกล่าวข้างต้นจะถูกทำซ้ำเฉพาะในแนวนอน ( background-repeat: repeat-x; ) พื้นหลังจะดูดีขึ้น:
| หมายเหตุ: ในการทำซ้ำภาพตั้งในแนวตั้ง background-repeat: repeat-y; |
|---|
ภาพพื้นหลัง - ตั้งค่าตำแหน่งและไม่มีการทำซ้ำ
แสดงภาพพื้นหลังเพียงครั้งเดียวนอกจากนี้ยังระบุโดย background-repeat ทรัพย์สิน:
ในตัวอย่างข้างต้น, ภาพพื้นหลังจะแสดงในสถานที่เดียวกันกับข้อความ เราต้องการที่จะเปลี่ยนตำแหน่งของภาพเพื่อที่จะไม่รบกวนข้อความมากเกินไป
ตำแหน่งของภาพที่ถูกระบุโดย background-position คุณสมบัติ:
ตัวอย่าง
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
ลองตัวเอง» ภาพพื้นหลัง - ตำแหน่งคงที่
เพื่อระบุว่าภาพพื้นหลังควรจะคงที่ (จะไม่เลื่อนกับส่วนที่เหลือของหน้า) ให้ใช้ background-attachment ทรัพย์สิน:
ตัวอย่าง
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
ลองตัวเอง» พื้นหลัง - ทรัพย์สินชวเลข
เพื่อตัดรหัสก็ยังเป็นไปได้ที่จะระบุทุกคุณสมบัติพื้นหลังในทรัพย์สินเดียว นี้เรียกว่าคุณสมบัติจดชวเลข
สถานที่ให้บริการจดชวเลขสำหรับพื้นหลังเป็น background :
เมื่อมีการใช้สถานที่ให้บริการจดชวเลขคำสั่งของค่าทรัพย์สินที่เป็น:
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position
มันไม่สำคัญว่าถ้าหนึ่งในค่าทรัพย์สินจะหายไปตราบใดที่คนอื่น ๆ ที่อยู่ในคำสั่งนี้
ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ออกกำลังกาย 5 »
คุณสมบัติทั้งหมด CSS พื้นหลัง
| คุณสมบัติ | ลักษณะ |
|---|---|
| background | ทุกชุดคุณสมบัติพื้นหลังในการประกาศ |
| background-attachment | กำหนดว่าจะให้ภาพพื้นหลังได้รับการแก้ไขหรือเลื่อนกับส่วนที่เหลือของหน้า |
| background-color | ชุดสีพื้นหลังขององค์ประกอบ |
| background-image | การตั้งค่าภาพพื้นหลังสำหรับองค์ประกอบ |
| background-position | กำหนดตำแหน่งเริ่มต้นของภาพพื้นหลัง |
| background-repeat | ชุดว่าภาพพื้นหลังจะต้องทำซ้ำ |