सभी ब्राउज़रों में एक छवि मार्कर को ठीक से प्रदर्शित करने के लिए, एक क्रॉस-ब्राउज़र समाधान की आवश्यकता होती है। छवि मार्कर के बाद पाठ संरेखण कभी-कभी विकृत हो जाता है। एक समान आउटपुट प्राप्त करने के लिए, हम छवि को पृष्ठभूमि के रूप में मार्कर के रूप में उपयोग करने के लिए निर्दिष्ट करते हैं और तदनुसार इसे संरेखित करते हैं।
उदाहरण
निम्नलिखित उदाहरण सूचियों की शैली को स्पष्ट करते हैं -
<!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> आउटपुट
यह निम्न आउटपुट देता है -
