我可以将背景图片渐变为背景颜色吗?

5

我希望网站能够有一个背景颜色,并且有一张随着宽度自适应并保持纵横比的背景图片。到目前为止还比较容易实现:

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/


如果你想通过像素来淡化颜色,那么请使用background-image: linear-gradient(to bottom, rgba(255,153,153,0) 0%,rgba(255,153,153,0) 50px,rgba(255,153,153,1) 100%), url(https://i.redd.it/x7hdjnmupu901.jpg);。 - Amranur Rahman
@AmranurRahman 请看下面的回答。 - Tyler Roper
没事,我没有看到这个。 - Amranur Rahman
@AmranurRahman 没问题 :) 我只是认为 OP 的回复可能对其他考虑使用 linear-gradient 方法的人有价值。 - Tyler Roper
需要放在 body 标签内,还是可以放在 div 标签内? - colxi
我需要它在这里的正文中,因为它是网站实际背景图像的一部分。 - user2015253
2个回答

9
你可以使用linear-gradient来应用第二个背景图像,这是一个从0不透明度到100%不透明度的渐变背景颜色。 你可以编辑下面的linear-gradient中的75%以更改淡入开始的位置,以及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;
}


不错的想法,但它并没有正常工作。尝试将代码片段视为完整页面,并缩小浏览器宽度,最终您将看到图像,一个清晰的黑色背景色过渡,并在底部淡入实际的背景颜色。 - user2015253
1
@user2015253 撤销之前的评论。我不确定有没有办法做到这一点,或者是否需要添加更多元素才能实现,但我需要好好想一想。 - Tyler Roper

0

很抱歉,如果您想让淡入效果在任何屏幕尺寸下都附着于背景图像上,您需要添加一些额外的元素,并在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


使用CSS诡计有多好或安全?它是否确保在所有浏览器上都能正常工作,并且具有未来性?通常情况下,将背景图像修改为在图像本身中过渡到透明(或背景颜色)是否更好呢? - user2015253
是完全安全和未来可靠的。我使用“tricky”一词,因为我正在向背景容器添加一个过渡效果,并向正文添加另一个过渡效果。如果您想支持旧版浏览器版本,则只需向linear-gradient添加相应的前缀即可,对于现代浏览器,它应该可以正常工作。 - colxi

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,