Question

我的CSS标记：

.rowbgi {
    background-image:url('img/gradient.png');
    background-color:#cccccc;
}

我的HTML标记：

    <div class="span4 rowbgi">
      <img class="img-circle" data-src="holder.js/140x140">
      <h2>Heading</h2>
      <p>Stack Overflow</p>
      <p><a class="btn" href="#">View details </a></p>
    </div><!-- /.span4 -->

我无法看到背景图片，但在背景中看到了颜色。图像在路径中可用。

有人可以告诉我一些愚蠢的错误吗？

Answer 1

没有人知道你在做什么，因为你没有显示它（例如，用jsfiddle; P），但我的第一个猜测是你有以下文件结构：

根目录中的HTML文件：/index.html，
css目录中的CSS文件：/css/style.css，
/img/gradient.png中的图片。

现在，请注意，从HTML / CSS链接的所有文件都有相对于它们的路径。因此，如果您将CSS保留在/css中，则CSS img/xxx中的路径会链接到/css/img/xxx。如果我正确猜测，这是你的情况，将风格改为：

background-image:url(/img/gradient.png);

或

background-image:url(../img/gradient.png);

Answer 2

我也尝试使用图像路径格式，但是图像根本没有显示。

但是当我将图像上传到服务器时，我假设它可以与任何图像托管平台（例如Imgur）一起使用，并使用完整路径，就可以了。

因此，不要使用：

background-image: url('img/gradient.png');

要做：

background-image: url('https://example.com/img/gradient.png');

希望这对某人有帮助！

Answer 3

要使用CSS加载图像，必须将图像文件保存在CSS文件夹中（如果使用外部样式表）。例如，如果使用URL $user，则CSS在CSS文件夹中寻找该文件。您的CSS标记告诉CSS，您的CSS文件夹中有一个名为image.jpg的子文件夹，

Bootstrap - 背景图像不工作

3 个答案: