在 CSS 中更改子彈圖像的大小

Question

這就是代碼

list-style-image:  url("https://www.boylesoftware.com/blog/wp-content/uploads/2015/04/checkmark.png") ;

我原以為它會像真正的子彈一樣小，但結果太大了

Answer 1

您可以使用以下樣式解決該問題：

 li { margin: 0; padding: 0 0 0 20px; list-style: none; background-image: url("https://www.boylesoftware.com/blog/wp-content/uploads/2015/04/checkmark.png"); background-repeat: no-repeat; background-position: left center; background-size: 15px; }

 <h1>The list-style-image Property</h1> <p>The list-style-image property replaces the list-item marker with an image:</p> <ul> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul>

Answer 2

 <style>.check{ width: 25px; height: 25px; } </style> <p>Unordered List <img class="check" src="https://www.boylesoftware.com/blog/wp-content/uploads/2015/04/checkmark.png" alt="Alternate Text" /><a href="#">Step 1</a></p>