সকল ব্রাউজারে ইমেজ مارকার সঠিকভাবে প্রদর্শন করতে একটি ক্রস-ব্রাউজার সমাধান প্রয়োজন। ইমেজ مارকারের পর টেক্স्ट অ্যালাইনমেন্ট কখনও কখনও বিকৃত হয়। একই আউটপুট পেতে, марকার হিসেবে ব্যবহৃত ইমেজকে ব্যাকগ্রাউন্ড হিসেবে নির্দিষ্ট করে সেটিকে অনুযায়ী আলাইন করা হয়।
উদাহরণ
নিচের উদাহরণগুলো লিস্ট স্টাইলিং উদাহরণ দেয়:
<!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>টিউটোরিয়াল</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>প্রয়োজনীয়তা:</p> <ul> <li>টিউটোরিয়াল</li> <li>ইন্টারভিউ QA</li> <li>কুইজ</li> </ul> </body> </html>
আউটপুট
এটি নিচের আউটপুট দেয়:
