Элемент Style <li>с фоном CSS, чтобы показать только часть изображений - PullRequest
Новая
       4

Элемент Style <li>с фоном CSS, чтобы показать только часть изображений

1 голос
/ 24 октября 2011

Может ли кто-нибудь помочь мне со списком.

У меня есть изображение: enter image description here

И теперь мне нужно построить список с быками по умолчанию, замененными стрелкой влево (но не с целымimage):

enter image description here

Как мне добиться этого с помощью кросс-браузерного CSS?

Моя HTML-разметка: 

<ul>
    <li><a href="#">Conveniently located on Adelaide St. W, one block east of the Bathurst   and Adelaide intersection, just north of the Gardiner Expressway, downtown Toronto.</a></li>
    <li>All units are located indoors, which means they are all climate controlled.</li>
    <li>There is an indoor loading dock with four bays, two of which are large enough to accommodate up to 50' trailers.</li>
    <li>Complimentary use of on-site dollies and pallet truck.</li>
</ul>

Ответы [ 5 ]

5 голосов
/ 24 октября 2011

См. Этот вопрос об использовании изображений Sprite с фоном в стиле списка:

используйте спрайты CSS для фонового изображения списка ()

2 голосов
/ 24 октября 2011

Я думаю, это то, о чем вы просили.

Проверьте это скрипка

Вот код

HTML - это то же самое.

CSS 

ul {
    list-style: disc inside none;
}

ul li:before {
    position: absolute;
    content: "";
    left: 8px;
    background: url('http://i.stack.imgur.com/KKMcz.png') no-repeat #fff;
    width: 8px;
    height: 14px;
}
1 голос
/ 24 октября 2011

вам нужно установить 

background: transparent, url(/image/sprite.png) no-repeat -XXpx -XXpx;

где -XXpx перемещает позицию элемента. Единственная проблема заключается в том, что вы должны убедиться, что отступы в том месте, где показано маркером, не слишком широкие и показывают только нужный размер изображения.

другой вариант, который у вас есть, это установить тип стиля списка: нет; а затем бросьте div или span в начале ваших элементов, которые вы хотите иметь изображение. Я не рекомендовал бы это, но это будет работать,

0 голосов
/ 24 октября 2011

Вот еще один метод, который должен быть кросс-браузерным. Однако вам необходимо изменить изображение спрайта. (Я не могу открыть изображение с помощью Photoshop, GIMP или чего-либо еще, не испортив его, хотя. Вам придется исправить это самостоятельно). (исправлено)

Демо

По сути, это смещение другого изображения по вертикали, а не по горизонтали. Если у вас есть более длинные списки, вам придется изменить, насколько это смещение по вертикали. Это должно работать во всех браузерах, и я протестировал его в IE9 с измененными настройками совместимости. работает даже в режиме кварков.

Модифицированное изображение выглядит так:

enter image description here

0 голосов
/ 24 октября 2011 
ul {
     list-style-image: url(/xxx/xxx.gif);
}

Даст вам все изображение, разве вы не можете просто разделить изображение по центру и использовать левую часть?

...