Rails 5 中具有线性渐变的背景图像

Question

我有用于线性渐变背景图像的简单 CSS 代码。

.main-bg-back-1{
    background:linear-gradient(180deg,#22263f,rgba(33,41,94,.96)),url(../img/app/download-bg.jpg) no-repeat;
    background-size:auto,cover;
    background-position:0 0,50% 50%
}

如何在 Rails 5 中编写此代码？我知道background-image: image-url("app/download-bg.jpg"); 用于 Rails 中的简单背景。但是我如何使用带有渐变的图像呢？

Answer 1

我用过这样的东西，试试下面的

.main-bg-back-1{
    background-image: asset-url('download-bg.jpg');
    background-size: cover;
    position: relative;
    height: 100%;
    background-position:0 0,50% 50%
}
.main-bg-back-1:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,#22263f,rgba(33,41,94,.96));
    mix-blend-mode: color;
    left: 0;
    top: 0;
}

确保图像在app/assets/images 并使用asset-url

背景尺寸：自动，封面；

您可以使用auto 或cover，不能同时使用，mix-blend-mode: color; 是可选的，您可以看到删除和添加它。

我已经在我的 Rails 应用程序上测试了你的梯度值，看看这个

更新

从评论来看，它也在工作

background-image:linear-gradient(),url();