背景图像不加载

Question

背景图片有问题属性。我想在 div scena 的背景中插入胶卷图像，但 background-image:url(img/rullino.png); 没有显示任何内容。

当我在 Mozilla 上用 Firebug 内联编写它时，它就可以工作了。

有人明白为什么会这样吗？

/* tag */

body,html{
 background-color: grey;
 font-family: 'Existence Light', arial, sans-serif;
 font-size: 1.8em;
 height:100%;
}

p {
 word-wrap:break-word;
}

/* ======= Generale sezioni ======= */

.sections{
 min-height: 100%;
}

/* ======= Entry-section ======= */

#entry-logo img{
 margin: 10% 0 0;
}

#entry-section #go-down{
 margin-top: 9%;
 text-align: center;
}

#entry-section i{
 content:"\f078";
 color:white;
}

/* ======= film-section ======= */

#film{
 height:100%;
}

#film > .container{
 height:100%;
 padding:0;
 margin:0;
 width:100%;
}

.container > #rullino {
 height:20%;
 background-color:red;
}

body #film .container #rullino .scena {
 background-image: url(img/rullino.png);
 background-color: #00ff00;
 background-repeat: no-repeat;
 height:100%;
 width:15%;
 float:left;
}

#rullino img{
 max-height:70%;
}

<body>
   <section id="entry-section" class="sections">
    <div class="container">
     <div id="entry-logo">
      <img src="img/logo.png" width="100%" alt="Un Autre Chien Andalou">
     </div>
     
    </div>
    <div id="go-down">
      <i class="fa fa-chevron-down"></i>
     </div>
   </section>
   <section id="film" class="sections">
    <div class="container">
     <div id="rullino">
      <div id="scena1" class="scena">
       <p>scena1</p>
      </div>
      <div id="scena2" class="scena">
       <p>scena2</p>
      </div>
      <div id="scena3" class="scena">
       <p>scena3</p>
      </div>
      <div id="scena4" class="scena">
       <p>scena4</p>
      </div>
      <div id="scena5" class="scena">
       <p>scena5</p>
      </div>
     </div>
    </div>

Answer 1

我用这张小狗的图片试过你的代码，它对我有用：“http://g-ecx.images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8.CB312176604.jpg”。

看来这可能是您的图片路径。而不是 "img/rullino.png"，请尝试“./img/rullino.png”或图像的绝对路径，以便它检查图像的当前文件夹。

此外，只是一个提高可读性+清洁度的提示 CSS - 如果您希望图像作为所有带有 class '.scena' 的 div 的背景，您只需要做这个：

.scena {
    background-image: url(img/rullino.png);
    background-color: #00ff00;
    background-repeat: no-repeat;
    height:100%;
    width:15%;
    float:left;
}

希望对您有所帮助！

背景图像不加载

background-image doesn't load

css

background

background-image