如何在Rails 5中编写带线性渐变的背景图片CSS代码？

嘿，这个问题我之前也碰到过，其实只需要把你原来CSS里的背景图路径替换成Rails Asset Pipeline提供的image-url()辅助函数就行，同时保留线性渐变的部分，具体写法如下：

正确的SCSS写法 #

假设你的样式文件是.scss后缀（Rails默认支持Sass，推荐用这个，路径处理更省心），可以这样写：

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

如果你觉得分开写属性更清晰，也可以拆成这样：

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

关键注意事项 #

• 文件位置：你的图片必须放在app/assets/images/app/download-bg.jpg这个路径下，因为image-url()会自动从app/assets/images目录开始查找资源。
• 样式文件后缀：如果你的样式文件是纯.css后缀，image-url()是不生效的，这时候要么把文件改成.scss，要么改用asset-url("app/download-bg.jpg", image)来替代。
• 路径优势：用image-url()代替手动写相对路径的好处是，Rails会自动处理开发/生产环境的路径差异，比如生产环境会给资源加上指纹（比如download-bg-abc123.jpg），避免缓存问题。

这样写出来的代码既保留了你想要的线性渐变效果，又能完美适配Rails的Asset Pipeline，不会出现路径错误的问题～

内容的提问来源于stack exchange，提问作者Malik Asad Ali