首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS图像线性梯度封面图像

CSS图像线性梯度封面图像
EN

Stack Overflow用户
提问于 2018-07-19 06:25:34
回答 2查看 162关注 0票数 0
background-image: url('http://unsplash.it/1200x800'), linear-gradient(red, transparent);    
background-size: contain;
background-repeat: no-repeat;
background-position: right;

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

EN

回答 2

Stack Overflow用户

发布于 2018-07-19 06:34:38

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

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>

票数 0
EN

Stack Overflow用户

发布于 2018-07-19 06:40:12

如果你想让红色从屏幕的左侧开始,然后在屏幕的右侧慢慢过渡到透明,只需在渐变中的“红色,透明”之前添加“到右侧”即可。

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>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51411824

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档