CSS图像线性渐变封面图像答案

【问题标题】：CSS image linear-gradient cover imageCSS图像线性渐变封面图像
【发布时间】：2018-07-18 22:25:34
【问题描述】：

background-image: url('http://unsplash.it/1200x800'), linear-gradient(red, transparent);    
background-size: contain;
background-repeat: no-repeat;
background-position: right;

我使用上面的代码在右侧显示包含的背景图像，并通过从红色到图像透明度的线性渐变填充左侧空间。这不起作用，因为它在右侧显示图像，但在左侧只是从红色到透明的线性渐变，不会越过图像......我该如何解决这个问题？

【问题讨论】：

标签： css linear-gradients

【解决方案1】：

只需翻转渐变和图像顺序。首先渐变，然后是图像。

body {
  background-image: linear-gradient(red, transparent), url('http://unsplash.it/1200x800');    
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
}

div {
  height: 300px;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

如果您想让红色从左侧开始并在屏幕右侧慢慢过渡到透明，只需在“红色，透明”之前的渐变中添加“向右”

body {
  background-image: linear-gradient(to right, red, transparent), url('http://unsplash.it/1200x800');    
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
}

div {
  height: 300px;
}

<div></div>

【讨论】：