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

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