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

Answer 2

恐怕，如果您希望将淡色以任何屏幕尺寸连接到背景图片，则需要添加一些额外的元素，并且在CSS方面比较棘手

但是它仍然表现为背景...

测试屏幕的大小调整为：http://jsfiddle.net/wkz1t2b3/77/

body{ 
  margin:0px;
  background-color:#ff9999;
  color:white;
}

#background{
    width:100%;
    position:fixed;
    z-index:-1
}

#background img{width:100%;}

/* the body fade becomes visible only when the image is bigger than the viewport */
body::after{
    background-image:  linear-gradient(to bottom, transparent, #ff9999);
    content:'';
    display:block;
    height:50px;
    bottom:0px;
    position:fixed;
    width:100%;
    z-index:-1;
}

#background::after{
    background-image:  linear-gradient(to bottom, transparent, #ff9999);
    content:'';
    display:block;
    height:50px;
    bottom:0px;
    position:absolute;
    width:100%;
}

<div id="background">
  <img src="https://i.redd.it/x7hdjnmupu901.jpg">
</div>


It behaves as a background

我可以将背景图片淡化为背景颜色吗？

2 个答案: