सभी ब्राउज़र्स में इमेज मार्कर को सही ढंग से प्रदर्शित करने के लिए, एक क्रॉस-ब्राउज़र समाधान आवश्यक है। इमेज मार्कर के बाद टेक्स्ट अलाइनमेंट कभी-कभी विकृत हो जाता है। एक समान आउटपुट प्राप्त करने के लिए, हम मार्कर के रूप में उपयोग की जाने वाली इमेज को बैकग्राउंड के रूप में निर्दिष्ट करते हैं और उसे उचित तरीके से अलाइन करते हैं।
उदाहरण
निम्नलिखित उदाहरण सूचियों की स्टाइलिंग को दर्शाते हैं:
<!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>Tutorials</h2> <ul> <li>Java</li> <li>C#</li> <li>C</li> <li>C++</li> <li>Spring</li> <li>Hibernate</li> </ul> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
दूसरा उदाहरण
<!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>Requirements:</p> <ul> <li>Tutorials</li> <li>Interview QA</li> <li>Quiz</li> </ul> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट देता है:
