html - Bootstrap CSS - 无法同时获取背景颜色和图像

Question

我将 Bootstrap 与 Rails 一起使用，但无法同时显示背景颜色和图像。我有一个自定义 CSS 样式表，我正在尝试将正文编辑为深色背景，右下角有一个小图像，如下所示：

body {
    padding-top: 55px;
    background-color: #2e2e2e;
    background-attachment: fixed;
    background-image: url('waves.png');
    background-repeat: no-repeat;
    background-position: right bottom;
}

问题是图像没有显示，只是背景。如果我删除“背景颜色”，它会显示出来并且看起来很完美，但我无法将它们放在一起。我知道我错过了一些小东西（可能也很愚蠢）。感谢帮助。

Answer 1

尝试将waves.png文件放入/assets/images并替换url('waves.png')为：

background-image: image-url('waves.png');

我假设您正在使用资产管道并且您的 CSS 文件由 Sass 预处理（样式表文件名以.css.scss 结尾），有关更多信息，我建议您阅读资产管道 Rails 指南。

Answer 2

你试过这种方法吗？

body {    
    padding-top: 55px;
    background: #2e2e2e url(waves.png) right bottom no-repeat;
    background-attachment: fixed;
}

Answer 3

确保文件扩展名是 .css.erb

body {
    padding-top: 55px;
    background: #2e2e2e url('<%= asset_path('waves.png') %>') fixed no-repeat right bottom;
}

Answer 4

不确定您所处的环境，但您尝试过!important吗？如果稍后在代码中的某个地方应用了具有不同值的样式，它会增加优先级。

body {
  ...
  background-color: #2e2e2e !important;
  background-image: url('waves.png') !important;
  ...
}