Как разместить фоновое изображение над текстом, используя CSS?

Я пытаюсь сделать мой HTML очень простым. У меня есть список, который объявляет имя мастера, как набор шагов...

<div>
    <ul class="wizardBar">
        <li class="step1">Step One</div>
        <li class="step2">Step Two</div>
        <li class="step3">Step Three</div>
    </ul>
</div>

И у меня есть следующее в моем файле CSS, чтобы отформатировать его...

.wizardbar
{
  display:table;           
  padding:0;
  margin:0;
  white-space:wrap;
  list-style-type:none;
}
* html .wizardbar {
  display:inline-block;
  width:1px;
  padding:0 2px;
}
.wizardbar li
{
  display:table-cell;
  width: 116px;
  text-align: center;
  padding-top: 36px;
}
.step1
{
  background: url('Step1.gif') no-repeat;
}
.step2
{
  background: url('Step2.gif') no-repeat;
}
.step3
{
  background: url('Step3.gif') no-repeat;
}

То, что я пытаюсь сделать здесь, это что-то вроде...

Step1.gif..... Step2.gif..... Step3.gif
.STEP 1........ ШАГ 2........ ШАГ 3

Где имя шага, то есть: "ШАГ 1" появляется под изображением для этого шага. В настоящее время текст находится поверх изображения. Я не хочу никакого совпадения.

Спасибо джастин

Источник

3 ответа

Решение

Добавьте это к вашему CSS-файлу:

.div.wizardBar li {
padding-top: 50px;
}

Возьмите верхнюю часть, пока не получите нужное расстояние.

Источник

Поскольку вы подробно описываете прогрессию, упорядоченную структуру, я настоятельно рекомендую использовать ol вместо ul, Тем не менее, следующее должно достичь вашей цели, хотя и не так чисто, как хотелось бы:

li {
  padding-top: 30px; /* equal to or greater than the background-image's height */
}

Префикс li с типом меню, который вы выбираете, увеличит специфичность, если требуется.

Источник

Я бы посмотрел CSS-атрибут background-position, вероятно, в связи с настройкой размера элемента.

http://www.w3schools.com/css/pr_background-position.asp для получения дополнительной информации.

Источник
Другие вопросы по тегам