Question

我正在设计一个包含幻灯片的网页。幻灯片放映的背景是图像文件夹中可用的图像。幻灯片背景中不显示背景图像。我试图覆盖我的机器中的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);
   }

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

Answer 1

删除html中的style="background:url(../images/slider-bg.png)"，css文件可以放在不同的目录中
检查，也许slider-bg.png将Uppercse命名为（Slider-bg.png，slider-bg.PNG等...）

Answer 2

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

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

在浏览器的开发工具中，看到图像实际上就在那里。

Answer 3

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

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

Answer 4

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

幻灯片背景图片不工作

4 个答案: