Блог

Главная - Вопросы по программированию - Фоновое изображение на становится фоном, а не пулей списка

Фоновое изображение на становится фоном, а не пулей списка

#html #css

Вопрос:

Поэтому я хочу, чтобы фотография стала пулей в моем списке. Я хочу использовать фоновое изображение, чтобы стать пулей. Но это становится фоном предмета.

 ul {
  list-style-type: none;
}

li {
  background-image: url('https://via.placeholder.com/50')
} 
 <ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

Это должно быть сделано с а background-image , а не с а list-style-image

Что мне нужно изменить?

Комментарии:

1. Пожалуйста, проверьте обновление моего ответа

Ответ №1:

Если вы хотите использовать свойство фонового изображения, вот рабочий пример:

 ul {
list-style-type: none;
padding: 0;
margin: 0;
}

li {
 background-image: url(https://developer.mozilla.org/static/media/edge.40018f6a.svg);
background-repeat: no-repeat;
background-position: 0 .4em;
padding-left: 20px;
} 
 <ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

Вот пример использования CSS-свойства list-style-image

 ul {
  list-style-type: none;
}

li {
  list-style-image: url('https://via.placeholder.com/50')
} 
 <ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

Ответ №2:

Вам нужно использовать list-style-image для использования изображения вместо обычных маркеров

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image

CSS-свойство list-style-image задает изображение, которое будет использоваться в качестве маркера элемента списка.

 ul {
  list-style-type: none;
}

li {
  list-style-image: url('https://via.placeholder.com/50')
} 
 <ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

Если идея состоит в том, чтобы подделать пулю с помощью фона, то background-size и background-position потребуется. Ниже приведен пример использования синтаксиса сокращений для background 

 ul {
  list-style-type: none;
  padding:0;
}

li {
  background: url('https://via.placeholder.com/50') 0 50% / 1em 1em no-repeat;
  padding-left:1.5em;
} 
 <ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>

Комментарии:

1. Но кто-то попросил меня сделать это с фоновым изображением.

2. @dmarinus, тогда вы уточните это в вопросе 😉 Я добавил фрагмент, используя фоновое изображение

Ответ №3:

Измените list-style-image значение ul 

 ul {
  list-style-image: url('https://via.placeholder.com/50')
} 
 <ul>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ul>
Метки: ,