คุณสมบัติ style backgroundRepeat ใช้เพื่อตั้งค่าหรือรับลักษณะที่ภาพพื้นหลังจะทำซ้ำเอง
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ backgroundRepeat -
object.style.backgroundRepeat = "repeat|repeat-x|repeat-y|no-repeat|initial|inherit"
คุณค่า
ต่อไปนี้เป็นค่าคุณสมบัติข้างต้น -
Sr.No | ค่า &คำอธิบาย |
---|---|
1 | ทำซ้ำ นี่คือค่าเริ่มต้น มันเล่นภาพพื้นหลังซ้ำทั้งในแนวตั้งและแนวนอน |
2 | repeat-x ทำซ้ำภาพพื้นหลังในแนวนอนเท่านั้น |
3 | ทำซ้ำ ทำซ้ำภาพพื้นหลังในแนวตั้งเท่านั้น |
4 | ไม่ทำซ้ำ ไม่ซ้ำภาพพื้นหลัง |
ตัวอย่าง
ให้เราดูตัวอย่างคุณสมบัติ backgroundRepeat -
<!DOCTYPE html> <html> <head> <style> body { background-image: url("https://www.tutorialspoint.com/power_bi/images/power-bi-minilogo.jpg"); background-repeat: repeat-x; color:black; font-size:20px; } </style> <script> function changeBackRepeat(){ document.body.style.backgroundRepeat="repeat-y"; document.getElementById("Sample").innerHTML="The background image is now repeated vertically"; } </script> </head> <body> <h2>Demo Heading</h2> <p>This is demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> <p>This is demo text.</p> <p>Change the body background image repeat value by clicking the below button</p> <button onclick="changeBackRepeat()">CHANGE REPEAT</button> <p id="Sample"></p> </body> </html>
ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่ม CHANGE REPEAT -