фоновое изображение div не показано

0

Динамически я делаю следующее:

'<div><img class="image-blockUI" src="../../images/Edit.gif" /><p class="text-blockUI">Being edited.</p></div>'

CSS:

.image-blockUI 
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.text-blockUI
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
}

Над кодом работает (изображение и текст по горизонтали, изображение над текстом), но теперь вместо использования изображения (img) я хочу заменить его фоновым изображением для div, поэтому я делаю это ниже:

'<div"><div class="image-blockUI" /><p class="text-blockUI">Being edited.</p></div>'

теперь я заменяю image-blockUI следующим:

.image-blockUI 
{
    height: 30px;
    width: 24px;
    background-image: '../../images/Edit.gif';
}

В этом случае текст отображается и горизонтально центрируется, но фоновое изображение не отображается. Что я делаю не так?

  • 1
    Имейте в виду, что ссылки на файлы в CSS относятся к файлу CSS, а не к HTML-документу.
  • 0
    может быть причина в неправильном пути к изображению? Как сделать из CSS, чтобы автоматически сгенерировать путь?
Теги:
image
alignment

2 ответа

2
Лучший ответ

это должно быть background-image: url('../../images/Edit.gif');

1

если вы используете относительный путь в файле css, путь связан с расположением файла (.css), поэтому, если ваш файл css не находится в той же папке, что и исходный html, вам нужно исправить его

  • 0
    Нет, в вашей ситуации будет отображаться значок исходного изображения вместо изображения / значка.,

Ещё вопросы

Сообщество Overcoder
Наверх
Меню