Использование css для изображений

Question

Я пытаюсь прикрепить изображение к тегу div.

<div class="arrow"></div> 

.left div.arrow{background-image: url(../images/design/arrow.jpg); float:left;} 

Ничего не отображается на странице html, используя это. Я делаю это правильно? У меня есть изображение в правильной папке.

Благодаря

Answer 1

Вы должны будете установить width и height свойства DIV, иначе DIV в основном невидим, так как он не имеет никакого содержания. Установите ширину & Высота по размеру фонового изображения.

изменить: как указали другие. Ваш селектор предполагает, что ваш целевой div находится внутри элемента с классом «left». Если это не так, ваш селектор не будет работать.

Answer 2

.left div.arrow{background-image: url(../images/design/arrow.jpg); float:left;} 

Это говорит о том, что div, имеющий класс arrow должен содержаться внутри элемента, имеющий класс left. Это так?

Вы можете изменить его на

div.arrow{background-image: url(../images/design/arrow.jpg); float:left;} 

Answer 3

Если вы хотите, чтобы отобразить DIV, когда он пуст, вы должны указать ширину и высоту для него в CSS.

Answer 4

Дива не имеет размера, поэтому он не будет отображаться. Либо укажите размер, либо добавьте некоторый контент в ваш div.

div.arrow{background-image: url(../images/design/arrow.jpg); float:left; width:100px; height:100px;} 

Answer 5

Когда вы сделаете это:

.left div.arrow{background-image: url(../images/design/arrow.jpg) 

Она будет работать только если DIV является внутри элемент с классом left.

Вы можете нацелить его непосредственно с этим:

div.arrow{background-image: url(../images/design/arrow.jpg) 

Убедитесь, что:

• Вы указываете width и/или height в CSS тоже

• Вы указываете правильный путь к изображению

  div.arrow{ background-image: url(../images/design/arrow.jpg); width:200px; height:200px; }