Изменить, чтобы добавить: вот ссылка: 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’ов невидимы?
Спасибо за любые ответы.
просто используйте одинарные кавычки ''
для вашего URL
background: url('/wp-content/gallery/Fotos_van_vroeger/Speeltuin De Vaan ZW_0003.jpg') no-repeat 50% 50%;
У вас есть несколько повторяющихся свойств … и вам не хватает некоторых цитат.
Попробуйте изменить код на что-то вроде этого (не проверено):
$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> ';
для следующего класса у вас действительно есть изображение, и его путь также правильный:
.kader-div1 {}
следующий класс внутри вышеуказанного класса и имеет белый фон, просто удалите цвет фона из следующего класса
.kader-div2 {}
и это поможет вам показать фон, кстати, будьте осторожны, этот класс был найден несколько раз в вашем файле CSS, когда вы удаляете белый фон, удалите его из нескольких фрагментов для одного и того же класса.