Question

我正在使用带有Rails的Bootstrap，无法将彩色和图像显示在一起。我有一个自定义的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

你试过这种方式吗？

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

Answer 2

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

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

我假设您正在使用资源管道，并且您的CSS文件由Sass预处理（样式表文件名以 .css.scss 结尾），有关详细信息，我建议您阅读{ {3}}

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;
  ...
}

Bootstrap CSS - 无法一起获取背景颜色和图像

4 个答案: