Как сохранить CSS-фоновое изображение поверх всех div-ов (стрелки-крошки)? - PullRequest
Новая
       40

Как сохранить CSS-фоновое изображение поверх всех div-ов (стрелки-крошки)?

4 голосов
/ 19 августа 2011

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

Ниже приведена ссылка на рабочий пример Google, а также мой текущий демонстрационный пример и скриншот того, почему хлебные крошки в настоящее время не работают. Ценю любую помощь, я тоже с удовольствием уточню что-либо!

Текущий скриншот ошибки: http://f.cl.ly/items/3H2Z3S3R2v0H3V1r3S3L/breadcrumbs-error.png (извините, это также было удалено!)

Ответы [ 5 ]

4 голосов
/ 19 августа 2011

Реализация Google использует postion: relative; margin-left: -13px в CSS, но в то же время они используют встроенные стили, чтобы присвоить разные z-index каждой ссылке следующим образом: image

Используйте javascript или ваш backend-скрипт, чтобы пройти по каждой ссылке и дать каждой ссылке более низкий z-индекс.

2 голосов
/ 19 августа 2011

попробуйте это: 

.crumbs li {
display: inline;
float: left;
margin-right: -11px;
position: relative;
}

, чтобы они соответствовали друг другу.Теперь добавьте это: 

.crumbs li:nth-child(1) {
z-index:10;
}
.crumbs li:nth-child(2) {
z-index:9;
} 
.crumbs li:nth-child(3) {
z-index:8;
}

и т. д.

Единственная проблема в том, что nth-child - это css3, так что это плохо для вашей кросс-браузерной поддержки.Вы также можете добавить классы в li, например, li.first li.second li.third и т. Д., И дать им уменьшающиеся z-индексы.Тогда это должно работать

0 голосов
/ 20 августа 2011

Добавить слева: -12px;к стилям элементов li хлебной крошки.Это будет работать только в том случае, если их позиция установлена ​​относительно;

Кроме того, чтобы мое решение работало, добавьте, например, PHP или JavaScript, которые добавляют к каждому элементу style = "z-index: 10;"Скрипт должен автоматически увеличить свойство z-index.Если вы делаете блог статичным и т. Д. Без PHP или JavaScript, установите z-index вручную.

0 голосов
/ 19 августа 2011

Другой (несколько некачественный) способ сделать это - добавить оболочку с таким же фоновым изображением. например, 

<li>
    <div style="float: left; background-image: url('img/bg-crumbs.png');">
        <a href="#">2011 Writing</a>
    </div>
</li>

для всех, кроме последнего.

0 голосов
/ 19 августа 2011

Ну, Google использует спрайты, относительное позиционирование и инкрементальные z-индексы. Я думаю, что вы должны пойти с той же техникой. Они реализуют z-индексы как встроенное моделирование с атрибутом style="", что кажется приемлемым в этой ситуации, особенно если они генерируются с PHP позже.

...