PHP / CSS: фоны для DIVs есть, но невидимы

Изменить, чтобы добавить: вот ссылка: http://www.svvreewijkdevaan.nl/nl/fotos-van-vroeger/

В файле PHP я генерирую серию div с изображениями в качестве фона, используя следующую строку (содержащуюся в цикле while):

echo ' <div class="pic" style="background:url('.$directory.'/'.$file.')
no-repeat 50% 50%; background-size: cover; background-repeat:   no-repeat;
background-position: center center; " >
<a href="'.$directory.'/'.$file.'" data-lightbox="image-1"title="'.$title.'" target="_blank">'.$title.'
</a> </div> ';

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

Это миниатюрные изображения, поэтому — с помощью плагина Lightbox2 — я сделал так, чтобы при нажатии на один из этих div-ов открывался лайтбокс, показывающий то же изображение (то есть тот же jpg-файл, что и используется в thumbnail-div), но больше. [Я знаю, что с точки зрения времени загрузки может быть не очень хорошей идеей использовать один и тот же файл изображения как в качестве эскиза, так и для большой картинки, но здесь это не имеет значения.]

Большая часть этого работает правильно:

  • div получают правильную высоту и ширину и кликабельны;
  • когда я щелкаю по уменьшенному элементу div, открывается светлое окно, в котором правильно отображается тот же файл изображения, который использовался в качестве фона для этого div.

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

Таким образом, я получаю большую белую страницу с множеством маленьких белых областей, по которым можно кликать (миниатюры), и только когда вы нажимаете, вы действительно видите изображение (т.е. в лайтбоксе).

Также странно, что та же самая конструкция работала без проблем на моем ранее используемом сервере. На новом сервере миниатюры просто невидимы.

Таким образом, возникает вопрос: почему фоны div’ов невидимы?

Спасибо за любые ответы.

-1

Решение

просто используйте одинарные кавычки '' для вашего URL

    background: url('/wp-content/gallery/Fotos_van_vroeger/Speeltuin De Vaan ZW_0003.jpg') no-repeat 50% 50%;
1

Другие решения

У вас есть несколько повторяющихся свойств … и вам не хватает некоторых цитат.
Попробуйте изменить код на что-то вроде этого (не проверено):

$imagePath = $directory.'/'.$file;

echo ' <div class="pic" style="background:url(\''.$imagePath.'\')  no-repeat center center; background-size: cover;" >
<a href="'.$imagePath.'" data-lightbox="image-1"title="'.$title.'" target="_blank">'.$title.'
</a> </div> ';
0

для следующего класса у вас действительно есть изображение, и его путь также правильный:

.kader-div1 {}

следующий класс внутри вышеуказанного класса и имеет белый фон, просто удалите цвет фона из следующего класса

.kader-div2 {}

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

0
По вопросам рекламы [email protected]