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

【问题标题】：Background image with linear-gradient in RailsRails 中具有线性渐变的背景图像
【发布时间】：2015-08-16 10:13:38
【问题描述】：

我的资产文件夹中保存了一张图片，这是一张横幅图片，我在上面显示了一些文字。我使用线性渐变来使文本更具可读性，并且看起来不错，但由于某种原因，它刚刚停止工作。（我什至没有改变任何东西）

这是我认为应该起作用的：

background-image: url('banner_img.jpg'), ( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) )

但 Rails 只有在我使用时才会加载图像：

background: image-url('banner_img.jpg')

为此添加线性渐变不起作用。

有什么想法吗？

谢谢

【问题讨论】：

你的意思是当你添加助手image-url它停止工作？
是的，背景：image-url('banner_img.jpg') 有效——但背景：( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), image-url('banner_img.jpg') 没有
我意识到我的问题 - 我愚蠢地错过了“线性渐变”......

标签： css ruby-on-rails ruby-on-rails-4

【解决方案1】：

这是我给你的代码。

HTML

<div class='foo'></div>

CSS

.foo {
  position: relative;
  background-image: url('http://adityamehta.in/wp-content/uploads/2014/08/Sky-Blue-Sky.jpg');
  width: 400px;
  height: 200px;
}

.foo:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, red, orange);
  mix-blend-mode: color;
}

看codepan。

【讨论】：