background-image: url('http://unsplash.it/1200x800'), linear-gradient(red, transparent);
background-size: contain;
background-repeat: no-repeat;
background-position: right;
我使用上面的代码在右侧显示包含的背景图像,并通过从红色到图像透明度的线性渐变填充左侧空间。这不起作用,因为它在右侧显示图像,但在左侧只有一个从红色到透明的线性渐变,不会越过图像。我该如何解决这个问题?
发布于 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>
发布于 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>
https://stackoverflow.com/questions/51411824
复制相似问题