home

หน้าแรก
 Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> JavaScript

กำหนดรูปภาพสำหรับ bullet style ด้วย CSS (list-style-image)

คุณสมบัติ list-style-image

คุณสมบัติ list-style-image ให้คุณระบุภาพเพื่อใช้เป็น bullet style ของตัวเอง

ตัวอย่าง

ลองรันโค้ดต่อไปนี้เพื่อกำหนดภาพสำหรับ bullet ด้วย CSS:

<html>
  <head>
  </head>
  <body>
    <ul style="list-style-image: url(/images/bullet.gif);">
      <li>Football</li>
      <li>Cricket</li>
    </ul>
  </body>
</html>

รายละเอียด:

  • ใช้ url('path/to/image.png') ระบุพาธภาพ
  • หากภาพโหลดไม่ได้ จะ fallback ไปใช้ list-style-type
  • แนะนำใช้ร่วมกับ list-style-type เป็น fallback
  • ขนาดภาพควรเล็ก (16x16px หรือ 20x20px)