คุณสมบัติพื้นหลังใช้สำหรับการตั้งค่าหรือรับภาพพื้นหลังที่เกี่ยวข้องกับองค์ประกอบ เป็นคุณสมบัติชวเลขและสามารถจัดการได้ถึง 8 คุณสมบัติ
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติพื้นหลัง -
object.style.background = "color image repeat attachment position size origin clip|initial|inherit"
คุณค่า
ต่อไปนี้เป็นค่า -
| Sr.No | ค่า &คำอธิบาย |
|---|---|
| 1 | สี สำหรับการตั้งค่าสีพื้นหลังขององค์ประกอบ |
| 2 | รูปภาพ สำหรับการตั้งค่าภาพพื้นหลังขององค์ประกอบ |
| 3 | ทำซ้ำ สำหรับการตั้งค่าวิธีการเล่นภาพพื้นหลังซ้ำ |
| 4 | สิ่งที่แนบมา สำหรับการตั้งค่าภาพพื้นหลังคงที่หรือเลื่อนกับหน้า |
| 5 | ตำแหน่ง สำหรับกำหนดตำแหน่งเริ่มต้นของภาพพื้นหลัง |
| 6 | ขนาด สำหรับกำหนดขนาดภาพพื้นหลัง |
| 7 | ต้นกำเนิด สำหรับการระบุพื้นที่การวางตำแหน่งพื้นหลัง |
| 8 | คลิป สำหรับกำหนดระยะการลงภาพพื้นหลัง |
ตัวอย่าง
มาดูตัวอย่างคุณสมบัติพื้นหลังกัน −
<!DOCTYPE html>
<html>
<head>
<style>
#PIC{
width: 250px;
height: 150px;
border:solid 3px black;
font-weight:100;
text-align:center;
color:white;
font-size:40px;
background: url("https://www.tutorialspoint.com/python/images/python-mini.jpg") no-repeat fixed 2% 8%;
}
</style>
<script>
function changeBackground(){
document.getElementById("PIC").style.backgroundImage="url(https://www.tutorialspoint.com/csharp/images/csharp-mini-logo.jpg)";
document.getElementById("Sample").innerHTML="The background URL is now changed and new background image can be seen.";
}
</script>
</head>
<body>
<h2>Learning is fun</h2>
<div id="PIC">Tutorial</div>
<p>Click the below button to change the above background image for the div</p>
<button onclick="changeBackground()">CHANGE BACKGROUND</button>
<p id="Sample"></p>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกเปลี่ยนภาพพื้นหลัง -
