การใช้รูปภาพเป็นเครื่องหมายรายการใน CSS

คุณสมบัติ list-style-image ใน CSS ใช้สำหรับตั้งค่ารูปภาพเป็นเครื่องหมายสำหรับรายการ

ไวยากรณ์

ไวยากรณ์ของคุณสมบัติ CSS list-style-image ดังนี้:

Selector {    list-style-image: /*value*/ }

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงคุณสมบัติ CSS list-style-image:

<!DOCTYPE html> <html> <head> <style> ul {    width: 150px;    list-style-image: url("https://www.tutorialspoint.com/images/Servlets.png");    background: goldenrod; } li {    text-align: center;    background: lavenderblush;    margin: 5px 30px; } </style> </head> <body> <h2>Servlets</h2> <ul> <li>คำขอจากไคลเอ็นต์</li> <li>การตอบกลับจากเซิร์ฟเวอร์</li> <li>การจัดการคุกกี้</li> <li>การติดตามเซสชัน</li> </ul> </body> </html>

ผลลัพธ์

ได้ผลลัพธ์ดังนี้:

ตัวอย่างเพิ่มเติม

<!DOCTYPE html> <html> <head> <style> ul {    margin-left: 20px;    list-style-image: url("https://www.tutorialspoint.com/images/hibernate.png"); } li {    font-size: 1.3em;    text-align: center;    background: burlywood;    margin: 3px; } </style> </head> <body> <h2>บทช่วยสอน Hibernate</h2> <ul> <li>เซสชัน</li> <li>คลาสถาวร</li> <li>ไฟล์แมปปิ้ง</li> <li>ประเภทแมปปิ้ง</li> <li>แอนโนเทชัน</li> </ul> </body> </html>

ผลลัพธ์

ได้ผลลัพธ์ดังนี้: