Để hiển thị dấu hiệu hình ảnh đúng cách trên tất cả các trình duyệt, cần một giải pháp đa trình duyệt. Căn chỉnh văn bản sau dấu hiệu hình ảnh đôi khi bị méo. Để đạt được đầu ra thống nhất, chúng ta chỉ định hình ảnh được dùng làm dấu hiệu dưới dạng nền và căn chỉnh nó tương ứng.
Ví dụ
Các ví dụ sau minh họa việc tạo kiểu cho danh sách:
<!DOCTYPE html> <html> <head> <style> ul{ list-style-type: none; padding: 0px; margin: 0px; font-size: 1.5em; } ul li{ background-image: url("https://www.tutorialspoint.com/images/spring.png"); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 24px; } </style> </head> <body> <h2>Hướng dẫn</h2> <ul> <li>Java</li> <li>C#</li> <li>C</li> <li>C++</li> <li>Spring</li> <li>Hibernate</li> </ul> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
Ví dụ khác
<!DOCTYPE html> <html> <head> <style> ul{ box-shadow: inset 0 0 8px orange; list-style-type: none; padding: 12px; padding-left: 20px; margin: 2px; font-size: 1.35em; } ul li{ background-image: url("https://www.tutorialspoint.com/images/css.png"); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 40px; font-style: italic; } </style> </head> <body> <p>Yêu cầu:</p> <ul> <li>Hướng dẫn</li> <li>Phỏng vấn QA</li> <li>Trắc nghiệm</li> </ul> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
