幻灯片背景图像不起作用答案

【问题标题】：slideshow background image not working幻灯片背景图像不起作用
【发布时间】：2017-02-16 19:40:11
【问题描述】：

我正在设计一个包含幻灯片的网页。幻灯片的背景是图像文件夹中可用的图像。背景图像不显示在幻灯片背景中。我试图覆盖我机器中的 CSS 文件，它出现了。但是，当我将内容上传到服务器时，没有显示背景图像。下面是html代码和css选择器：

<div style="background:url(../images/slider-bg.png)" class="slideshow">
   <div class="row">
     <div class="large-12 twelve columns">
       <section class="slider">
         <div class="flexslider">
            <ul class="slides">
                  <li><img src="images/slider/1.jpg"alt=""></li>
                  <li><img src="images/slider/2.jpg" alt=""></li>
                  <li><img src="images/slider/3.jpg" alt=""></li>
                  <li><img src="images/slider/4.jpg" alt=""></li>
                  <li><img src="images/slider/5.jpg" alt=""></li>
                  <li><img src="images/slider/6.jpg" alt=""></li>
                  <li><img src="images/slider/7.jpg" alt=""></li>
                  <li><img src="images/slider/8.jpg" alt=""></li>
                  <li><img src="images/slider/9.jpg" alt=""></li>
         </ul>
    </div>
  </section>
</div>

这是 CSS 代码：

 .slideshow {
          margin:0;
          background:url(../images/slider-bg.png);
   }

这个问题的原因是什么以及如何解决？提前非常感谢您！

【问题讨论】：

控制台有错误吗？
在服务器上，您的应用程序是否驻留在子文件夹中（不是根目录）？
这可能是路径或样式问题。我们无法从您提供的内容中得出结论。
这很可能是您的问题。查看服务器站点时，在浏览器的调试工具中检查网络活动。尝试查看每个图像的“点击”网址。它可能不会进入子文件夹。
那么它似乎没有走上正确的道路。它将发送至images/slider。但是不应该去appFolder/images/slider吗？

标签： javascript jquery html css image

【解决方案1】：

删除html中的style="background:url(../images/slider-bg.png)"，css文件可以放在不同的目录
检查一下，可能slider-bg.png 名称中有大写字母（Slider-bg.png、slider-bg.PNG 等...）

【讨论】：

我已经删除了覆盖样式并仔细检查了图像名称。完全一样。
谢谢你，grinmax，你的帮助和建议。现在已修复。
我做到了。请为这个问题打个“+”吗？
@Mohammed 这是怎么做的？ )) 我不知道

【解决方案2】：

如果没有示例，故障排除有点困难，但如果您使用的是 flex 滑块，我猜图像隐藏在幻灯片后面。一种测试方法是设置

<div class="flexslider" style="visibility: hidden;">

在浏览器的开发工具中查看图像是否确实存在。

【讨论】：

我查过了，没有隐藏。在我设置你给的值后，我得到了没有任何图像的清晰区域
这很奇怪，看起来这将是一个简单的小错误。是否可以在这里创建一个功能示例，或者一个 jsfiddle 或 codepen？我通过向
添加背景图像在 woopress 上的 flexslider 2 演示中进行了测试，并且它起作用了。
它在本地机器上工作。但是在将内容上传到服务器时，它不会。这就是问题所在。
对不起，我帮不上忙。没有看到现场示例，很难排除故障，因为它可能是由任何原因引起的。
感谢 rawnewdlz 的指导和帮助。现在已修复。

【解决方案3】：

如果没有整个文件及其确切位置，很难回答您的问题，但有一个小细节对我来说并不正确：css 文件中的 url 没有被（双）引号包围。

.slideshow {
          margin:0;
          background:url("../images/slider-bg.png");
}

【讨论】：

在定义后台 URL 时实际上不需要引号，除非有“特殊字符”。 stackoverflow.com/a/2168861/3130549

【解决方案4】：

这是 CSS 文件中位于滑块部分前面很远的地方的错误。我修复了它，现在背景图像可以正常工作。感谢所有与此问题互动并为我提供宝贵线索以找出错误的人。

【讨论】：