PHP/CSS: DIV 的背景存在，但不可见

Question

编辑添加：这是 link：http://www.svvreewijkdevaan.nl/nl/fotos-van-vroeger/

在 PHP 文件中，我使用以下行（包含在 while 循环中）生成了一系列以图像为背景的 div：

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> ';

我注意到，正如您在上面的代码行中看到的，我没有使用背景图像属性，而是背景属性。此外，div 从样式 sheet 中获得固定的宽度和高度。

这些是缩略图，所以 - 在 Lightbox2 插件的帮助下 - 我已经做到了，当你点击其中一个 div 时，会打开一个灯箱，显示相同的图像（即与缩略图-div 中使用的相同的 jpg 文件），但更大。 [我知道，就加载时间而言，将同一个图像文件同时用作缩略图和大图可能不是一个好主意，但这与此处无关。]

其中大部分工作正常：

div 获得了正确的高度和宽度，并且可以点击；
当我单击缩略图 -div 时，会打开一盏灯 window，它会正确显示用作 div 背景的相同图像文件。

但是，问题是缩略图本身（用作背景的图像）不可见。这些文件显然位于正确位置（否则灯箱也不会显示它们），您可以单击它们以在灯箱中查看图像，但您看不到任何缩略图图像。

所以我得到的是一个大白页，上面有许多小的白色可点击区域（缩略图-div），只有当你点击时你才能真正看到图像（即在灯箱中).

奇怪的是，同样的构造在我以前使用的服务器上运行没有问题。在新服务器上，缩略图是不可见的。

因此，问题是：为什么 div 的背景不可见？

感谢任何回复。

Answer 1

只需为您的 URL

使用单引号 ''

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

PHP:

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> ';

编辑：(t784956) 警告下一个代码只是一个例子不要复制粘贴

can i use data()?

PHP:

echo '<div class="pic" data-backgroundurl="'.$directory.'/'.$file.'">
  <a href="'.$directory.'/'.$file.'" data-lightbox="image-1" title="'.$title.'" target="_blank"></a>
</div>';

$(".pic").each(function(index) {
  var bUrl = $(this).data("backgroundurl");
  console.log(bUrl);
  $(this).css("background-image", "url('" + bUrl + "')")
});

.pic {
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  width: 400px;
  height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pic" data-backgroundurl="http://lorempixel.com/400/200/sports/">
  <a href="http://lorempixel.com/400/200/sports/" data-lightbox="image-1" title="x" target="_blank">
  </a>
</div>

<div class="pic" data-backgroundurl="http://lorempixel.com/400/200/nightlife/">
  <a href="http://lorempixel.com/400/200/nightlife/" data-lightbox="image-1" title="y" target="_blank">
  </a>
</div>
<div class="pic" data-backgroundurl="http://lorempixel.com/400/200/technics/">
  <a href="http://lorempixel.com/400/200/technics/" data-lightbox="image-1" title="z" target="_blank">
  </a>
</div>

Answer 2

您有一些重复的属性...并且您遗漏了一些引号。尝试将您的代码更改为如下内容（未测试）：

$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> ';

Answer 3

对于以下 class 你确实有图像并且它的路径也是正确的：

.kader-div1 {}

下面的 class 在上面的 class 里面并且有一个白色的背景只是从下面的 class

中删除背景颜色

.kader-div2 {}

这将帮助您显示背景，顺便说一句，当您删除白色背景时，请注意这个 class 在您的 css 文件中创建了不止一次相同 class

的片段

PHP/CSS: DIV 的背景存在，但不可见

PHP/CSS: Backgrounds for DIVs are there, but are invisible

css

php

background

invisible