Question

我的身体上有一个background-image，可以重复设置，以便无论页面的长度如何，它都像无限的背景一样覆盖整个页面。

我希望这种淡出效果能够在初次加载页面时在窗口下方大约一半处显示默认背景（纯白色），所以它更像横幅背景。

我已经找到了类似的先前问题：Fade image to transparent like a gradient详细说明了如何淡化位于其他内容后面的img元素。

但是我专门问如何淡化应用于CSS的background-image，而不是img元素。这可能吗？

这是我想要的效果的一个示例（通过直接在图像处理软件中编辑图像来完成）：https://travamigos.com/about-us/

Answer 1

这对于CSS来说是不可能的，因为背景图像不会受到opacity的影响。

但是，您可以使用不透明的背景渐变来覆盖bg图像背景，但是对于您的情况white，它必须以确定的颜色结束。

body {
  min-height: 100vh;
  background-image: linear-gradient(transparent, white 75%), url(http://www.fillmurray.com/460/300);
}