คุณสมบัติ background-attachment

คุณสมบัติ background-attachment กำหนด วิธีการเลื่อนภาพพื้นหลังของ องค์ประกอบ: พร้อมกับข้อความ หรือให้ข้อความ เลื่อนไหลไปบนภาพ

ไวยากรณ์

cssselector {
  background-attachment: fixed | scroll | local;
}

ค่า

ค่า	คำอธิบาย
`fixed`	ภาพพื้นหลังจะอยู่กับที่ และข้อความจะเลื่อนไหลไปบนมัน
`scroll`	ภาพพื้นหลังจะเลื่อนไปพร้อมกับข้อความ
`local`	พื้นหลังถูกตรึงโดยคำนึงถึงพฤติกรรมขององค์ประกอบ หากองค์ประกอบมีการเลื่อน พื้นหลังจะเลื่อนไปพร้อมกับเนื้อหา แต่พื้นหลังที่เกินขอบเขตขององค์ประกอบจะยังคงอยู่ที่เดิม

ค่าเริ่มต้น: scroll

ตัวอย่าง . ค่า scroll

ตอนนี้คุณสมบัติ background-attachment ถูกตั้งค่าเป็น scroll ลองเลื่อน องค์ประกอบในแนวตั้ง - คุณจะเห็นว่าข้อความ เลื่อนไปพร้อมกับพื้นหลัง:

html<body>
  <div id="elem">
    some long text
  </div>
</body>

cssbody {
  background-attachment: scroll;
  background-image: url("bg.png");
}

#elem {
  width: 400px;
  margin: 0 auto;
  text-align: justify;
  font-weight: bold;
  font-size: 20px;
}

Результат:

ตัวอย่าง . ค่า fixed

และตอนนี้คุณสมบัติ background-attachment ถูกตั้งค่าเป็น fixed ลองเลื่อน องค์ประกอบในแนวตั้ง - คุณจะเห็นว่าข้อความ เลื่อนไหลไปบนพื้นหลัง:

html<body>
  <div id="elem">
    some long text
  </div>
</body>

cssbody {
  background-attachment: fixed;
  background-image: url("bg.png");
}

#elem {
  width: 400px;
  margin: 0 auto;
  text-align: justify;
  font-weight: bold;
  font-size: 20px;
}

Результат:

ดูเพิ่มเติม

คุณสมบัติ background
ซึ่งเป็นคุณสมบัติแบบย่อสำหรับพื้นหลัง