css - 我可以将背景图像淡入背景颜色吗？

Question

我希望网站具有背景颜色和随宽度缩放并保持纵横比的背景图像。到目前为止很简单:

body {
    background-attachment:fixed;
    background-color:#ff9999;
    background-image:url(https://i.redd.it/x7hdjnmupu901.jpg); // random image from google search
    background-position:top center;
    background-repeat:no-repeat;
    background-size:100% auto;
}

现在，是否可以使用 CSS 使底部的背景图像“淡入”背景颜色？例如，背景图像底部的 50 个像素是否会慢慢失去 alpha 值，从而顺利进入背景颜色？

这是一个 JSFiddle，如果有人想看这个/玩它:http://jsfiddle.net/wkz1t2b3/5/

Answer 1

你可以使用 linear-gradient应用第二个背景图像，它是来自 0 的背景颜色的渐变不透明度为 100%不透明度。

您可以编辑 75%在下面linear-gradient更改淡入淡出的开始点，以及 100%调整背景颜色完全可见的点。

body {
    background-attachment:fixed;
    background-color:#ff9999;
    background-image: linear-gradient(to bottom, rgba(255,153,153,0) 0%,rgba(255,153,153,0) 75%,rgba(255,153,153,1) 100%), url(https://i.redd.it/x7hdjnmupu901.jpg);
    background-position:top center;
    background-repeat:no-repeat;
    background-size:100% auto;
}