使用 css 使图像背景淡入底部答案

【问题标题】：Make the background of image fade to the bottom using css使用 css 使图像背景淡入底部
【发布时间】：2022-02-09 06:39:20
【问题描述】：

我在主页上设置了背景图片。

对于移动设备，如您所见，图像有一个锐利的切割，我希望有一个背景，例如：

所以背景有渐变淡入到底部有没有办法用css或设计和使用背景来实现这一点是最好的选择？

【问题讨论】：

CSS 无法自动检测图像的颜色，但是，如果您知道每个背景所需的颜色，则可以在 body 标记上设置一个类来设置特定颜色取决于图像。这不是一种动态方法，因为您必须手动设置每张图片的颜色。
请使用实际的 CSS 和相关 HTML 更新您的问题，以便我们在这里为您提供最好的帮助

标签： javascript html css

【解决方案1】：

使用正文或容器背景（div）

#container{
width:100%;
height:100vh;
background: rgb(252,161,120);
background: linear-gradient(0deg, rgba(252,161,120,1) 0%, rgba(247,147,101,1) 30%, rgba(246,123,71,1) 66%, rgba(244,102,42,1) 100%);
}

&lt;div id="container"&gt;&lt;/div&gt;

【讨论】：