Question

我的图片中保存了一张图片，它是一张横幅图片，我在其上面显示了一些文字。我使用线性渐变使文本更具可读性，看起来不错，出于某种原因，这只是停止工作。（我甚至没有改变任何事情）

这是我认为应该工作的：

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')

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

有什么想法吗？

感谢

Answer 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。

与线性梯度的背景图象在路轨

1 个答案: