背景图像未在 jumbotron 中显示答案

【问题标题】：Background image not showing in jumbotron背景图像未在 jumbotron 中显示
【发布时间】：2015-04-04 01:19:22
【问题描述】：

我在 Rails 3.2.21 上运行 Ruby 1.9.3。我已将 jumbotron 类添加到我的 idex.html.erb 文件的顶部。

<div class="jumbotron">
  <h1>Handcrafted items from <br>
    around the world.</h1>
  <h2>Discover one-of-a-kind items</h2>
</div>

然后在我的 custom.css.scss 文件中，我添加了背景图片的信息：

@import "bootstrap";

body {
    background-color: #F5F5F1;
    color: #333333;
    font-family: Arial, Helvetica, sans-serif;
}

.navbar-default {
    background-color: #EFEFEB;
}

.navbar-default .navbar-brand {
    font-family: guardian-egyptt, georgia, serif;
    font-weight: 400;
    color: #d5641c;
    font-size: 30px;
}

.navbar-default .navbar-nav > li > a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #0192B5;
}

.center {
    text-align: center;
}

.col-md-3:nth-child(4n+1) {
    clear: left;
}

.col-md-6 {
    h3 {font-size: 45px;}
    h5 {font-size: 25px;}
    p {font-size: 18px;}
}

.caption {
    h3 {
        font-size: 17px;
        margin: 2px;
    }
    p {
        font-size: 15px;
        margin: 0px;
    }
}

.jumbotron {
    background-image: url('jumbotron.jpg');

}

文件jumbotron.jpg已按照提示保存到app/assets/images文件夹。这对教练有用，他的大屏幕现在显示所选的背景图像，但我的没有。我的只是一个盒子，里面有文字，没有图片。

我做错了吗？

【问题讨论】：

Steve Chesnowitz 的答案应该是正确的。请注意，使用background-image: asset-url('your_image.png') 时，rails 将直接跟踪到图像文件夹的路径，因此无需编写完整路径。

标签： css ruby-on-rails ruby

【解决方案1】：

好吧，我得到了要显示的背景图像，但这只是通过将其内联添加到 index.html.erb 文件中。

现在的代码是：

<div class="jumbotron" style="background-image: url('jumbotron.jpg');"> <h1>Handcrafted items from <br> around the world.</h1> <h2>Discover one-of-a-kind items</h2> </div>

但我无法更改字体。

【讨论】：

【解决方案2】：

可以在您的custom.css.scss 中转至：

.jumbotron {
    background-image: image-url("jumbotron.jpg");
}

关于使用资产管道在 css 文件中构建 url 的更多信息：http://guides.rubyonrails.org/asset_pipeline.html#css-and-sass

【讨论】：

我试过了。同样的结果，图像仍然没有显示。
css文件中生成了什么URL？服务器上的清单文件中该文件的 URL 是什么？部署到服务器时是否编译了资产？
对不起，我对此非常陌生。这是我第一个使用 RoR 的应用程序。我不明白你在问什么。如果有帮助，文件就在这里：github.com/crista-b/etsydemo

【解决方案3】：

我也只设法在 HTML 代码中将背景图片添加为内联

 <div class="jumbotron" style="background-image:url('images/imageName.jpg'); background-position:right; background-repeat:no-repeat;">

将 background-image 属性添加到任何 hte CSS 文件都不起作用（为此我将 ' 更改为 " 以及任何其他组合）。我尝试了 bootstrap.min.css、jumbotron-narrow.css、创建我自己的样式表并在任何其他 CSS 之后调用它...

没有其他东西对我有用！ :-(

【讨论】：

【解决方案4】：

.jumbotron {
    background: #000 url("image.jpg") center center;
    width: 100%;
    height: 100%;
    background-size: cover;
    overflow: hidden;
}

【讨论】：

【解决方案5】：

在您的 CSS 中放置此代码。设置“asset-url”似乎可以解决问题。希望这有帮助。

.jumbotron {
  background-image: asset-url("name_of_image.PNG");
}

【讨论】：

【解决方案6】：

我遇到了同样的问题，刚刚找到了解决方案。我在 jumbotron 内部使用了 div class="container-fluid" 并将我的图像添加到其中。出于某种原因，似乎只有内联样式有效，所以我添加了我所有的内联样式。

我的代码是这样写的：

<div class="container-fluid" style="background-image: 
    url('JumbotronPic.png');
    background-size: cover;
    min-height: 100vh;">blah blah blah </div>

【讨论】：