html - Cloud9 IDE + Rails App : CSS Background Image Not Showing on . erb 页面

Question

这个问题已经被问过很多次了，但我无法解决。

我试图在 Cloud 9 IDE 上的 ruby​​ on rails 应用程序页面上显示图像，但图像不会出现。

CSS

.hero-image {
    /* The image used */
    background-image: url("images/banner.jpg");

    /* Set a specific height */
    height: 50%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.erb 页面

<div class="hero-image">
</div>

图片存放在app/assets/images

样式表目录:app/assets/stylesheets

我知道文件路径必须是相对于样式表页面的，我做对了吗？我也试过将图像移动到样式表目录并更改为 url("banner.jpg")，但它仍然不起作用。

编辑:

将 url 更改为上传到 google 存储桶的图片链接也不起作用。

background-image: url("https://storage.googleapis.com/#####");

Answer 1

以下更改应该可以解决问题:

• CSS 中的 BG url 为 background-image: url("/assets/benchmark.PNG");
• 以上css映射到erb文件<link rel="stylesheet" href="/assets/test.css">
• 要查看图像，div 应该有一些数据，因为这是一个 div 背景:

<div class="hero-image">
sdfdsfbfd <br/>sdfdsfbfd <br/>sdfdsfbfd <br/>sdfdsfbfd <br/>
</div>