คุณสมบัติ background-attachment ใน CSS ใช้ระบุตำแหน่งของภาพพื้นหลังเมื่อหน้าถูกเลื่อน (scroll) 相对กับ viewport สามารถมีค่าเป็น scroll, fixed และ local
ไวยากรณ์
ไวยากรณ์ของคุณสมบัติ CSS background-attachment property มีดังนี้:
Selector { background-attachment: /*value*/ }
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงคุณสมบัติ CSS background-attachment property:
<!DOCTYPE html> <html> <head> <style> body { background-repeat: no-repeat; background-attachment: local; background-position: center; background-image: url("https://www.tutorialspoint.com/power_bi/images/power-bi-mini-logo.jpg"); } div { padding: 40px; margin: 30px; } .in { background: rgba(0,0,0,0.4); } </style> </head> <body> <div id="one"> <div class="in"></div> <div class="in"></div> <div class="in"></div> <div class="in"></div> <div class="in"></div> </div> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
เมื่อเลื่อน (scroll) จะได้ผลลัพธ์ดังนี้:
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> body { background-repeat: no-repeat; background-attachment: fixed; background-position: 10% 5%; background-image: url("https://www.tutorialspoint.com/power_bi/images/power-bi-mini-logo.jpg"); } div { padding: 80px; margin: 30px; border-radius: 4%; } .in { background: rgba(0,40,0,0.4); } </style> </head> <body> <div id="one"> <div class="in"></div> <div class="in"></div> <div class="in"></div> <div class="in"></div> <div class="in"></div> </div> </body> </html>
ผลลัพธ์
ได้ผลลัพธ์ดังนี้:
เมื่อเลื่อน (scroll) จะได้ผลลัพธ์ดังนี้:
