如何CSS图像线性渐变覆盖面图像?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (60)
background-image: url('http://unsplash.it/1200x800'), linear-gradient(red, transparent);    
background-size: contain;
background-repeat: no-repeat;
background-position: right;

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

提问于
用户回答回答于

如果你试图让红色开始在左侧并慢慢过渡到屏幕右侧的透明,只需在"red, transparent"之前的渐变中添加"to right,"

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>
用户回答回答于

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

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;
}
<div></div>

扫码关注云+社区

领取腾讯云代金券