Question

我正在使用bootstrap构建一个简单的站点，我似乎无法使background-image css样式工作。我想把它放在我的.jumbotron div上，这是我网站的第一部分（除了导航栏，有些人称之为英雄部分）。

这是我的代码，我哪里出错？

refid

文件路径：

.main-banner { background-image: url("../img/collection-of-classic-cars.jpg") no-repeat; } <section> <div class="jumbotron"> <div class="container"> <div class="main-banner"></div> <h1>Welcome!</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <a class="btn btn-primary btn-lg" href="#name" role="button">Contact us</a> </div> </div> </section>

Answer 1

请注意，图片网址应为relative to the stylesheet，而不是您所投放的HTML。所以很可能你的图像路径不正确。其他常见的错误是文件名不匹配。 FOO.jpg 与unix like系统中的 foo.jpg 不同。

Answer 2

你不应该在background-image属性中使用无重复，它可以在背景速记中使用，所以这样做：

.main-banner {
  background-image: url("../img/collection-of-classic-cars.jpg");
  background-repeat: no-repeat;
}

http://tympanus.net/codrops/css_reference/background-image/ http://tympanus.net/codrops/css_reference/background-repeat/

Answer 3

<div class="main-banner"></div>没有大小...... http://jsfiddle.net/fnw39gco/1/

不需要重复定义为自己的css标签：

背景重复：不重复

http://www.w3schools.com/cssref/pr_background-repeat.asp

Answer 4

正如vicodin所说，你的CSS代码是错误的。 background-image属性只接受网址。最好的方法是使用background简写：

background: url("../img/collection-of-classic-cars.jpg") no-repeat;

/* Adding even more options */
background: #FFF url('img.jpg') center fixed no-repeat;

/* Which would be the same as */
background-color: #FFF;
background-image: url('img.jpg');
background-position: center;
background-attachment: fixed;

Answer 5

就我而言，经历了许多SO（Stack Overflow）问题之后，几乎是在互联网上搜索了许多小时之后。我想出了这个

当我在控制台和路径上看到错误时，它就显示出来了，但缺少了一部分（路径）

控制台上显示的路径：

file:///E:/dist/img/model-1.jpg

所以，我只是提供了缺少的部分，它就起作用了。

background-image css不工作

5 个答案: