Я пытаюсь создать заголовок для веб-сайта, где заголовок сайта отображается над изображением. Я установил его для использования элемента div-класса с фоновым изображением. Однако я не могу понять, почему фоновое изображение в этом элементе класса div, которое я создал, не отображается.
После проверки выяснилось, что правила стиля CSS, связанные с элементом класса div, удаляются из элемента при его рендеринге (в Firefox и Chrome не пробовал IE).
У меня такая настройка css:
.text-over-image {
width: 960px;
height: 100px;
background-image: url("http://www.lupenet.org/wp-content/themes/Lupenet/images/header.jpg");
margin-left: auto ;
margin-right: auto ;
}
h8 {
position: absolute;
top: 20px;
left: 400px;
width: 960px;
}
h8 span {
color: black;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
padding: 10px;
}
h8 span.spacer1 {
padding:0 5px;
}
И html выглядит так:
<div class="text-over-image;" >
<h8><span style="position:absolute;">La Unión Del Pueblo Entero<span class='spacer1'></span>
<br><span class='spacer1'></span>"Celebrando el Pasado y Viendo Hacia el Futuro"</span></h8>
</div>
Поняв, что возникла проблема, я задал атрибуты высоты и ширины элемента .text-over-image
в случае, если div просто был слишком мал для просмотра изображения, но фоновое изображение все еще не отображалось. Когда я проверил элемент с помощью firebug, я обнаружил, что элемент div .text-over-image
вообще не показывает атрибуцию фонового изображения. На самом деле все правила стиля CSS стираются из этого элемента div.
Я даже попытался скопировать css и html другого веб-сайта, который делает именно то, что я пытаюсь сделать, но когда я это делаю, происходит то же самое (правила стиля удаляются из этого элемента div). Однако правила стиля CSS не удаляются из других элементов.
Удалите ;
от вашего класса:
<div class="text-over-image;">
Это должно быть просто <div class="text-over-image">
Я прочитал ваш css, и после этого я только что пришел к этому вопросу! В HTML нет законного элемента h8
.
Поэтому я предполагаю, что проблема заключается в использовании h8, попробуйте заменить его на h6.
h
изображение все равно должно появиться. я думаю, что ошибка была;
в теге, как описано ниже