Я не могу найти элегантный способ выполнить следующее с помощью CSS:
Мне нужно, чтобы числа упорядоченного списка имели фоновый фон с пузырьками. У меня есть это изображение (включая белый ход):
Но я не могу понять, как поместить его за каждый из чисел, используя CSS. Спасибо.
Я бы, наверное, сделал что-то вроде этого:
ol {
list-style-position: inside;
color: white;
}
ol li {
background-image: url('nswCH.png');
background-position: -5px;
background-repeat: no-repeat;
padding-left: 7px;
}
Я предпочел бы следующим образом
/* reset the ol counter with class liststyled*/
ol.liststyled {
counter-reset: item;
list-style-type: none;
list-style-position: inside;
padding-left: 0;
}
/* make the li relative */
ol.liststyled li{
position: relative;
padding-left: 35px;
}
/*add absolute positioned img element background to our relative li */
ol.liststyled li:before{
font-size: .8em;
line-height: 25px;
vertical-align: middle;
width: 25px;
color: #fff;
text-align: center;
height: 25px;
content: counter(item) " ";
counter-increment: item ;
position: absolute;
left: 0;
background: url('../img/bulletolback.png') center no-repeat;
}
Это лучший способ для меня.... Настроить упорядоченные списки с:: перед псевдоэлементом
Используйте правило list-style-image css с URL-адресом для изображения. Ниже приведен пример из документации Mozilla для CSS,
ul {
list-style-image: url("images/arrow.gif")
}
Вы также можете проверить их живую демонстрацию.
Ой, подождите, я просто понял, что это не позволит вам иметь номера в изображениях... хорошо, ну это, по крайней мере, частично отчасти вы там...