如何以渐变方式将背景图像淡化为透明？

Question

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

我希望在第一次加载页面时淡出以显示窗口一半左右的默认背景（纯白色），因此它更像是横幅背景。

我发现以前的问题是这样的：像渐变一样将图像淡入透明，详细说明如何淡化img位于其他内容后面的元素。

但我特别询问如何background-image使用 CSS淡化应用，而不是img元素。这可能吗？

---

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

Answer 1

这在 CSS 中是不可能的，因为背景图像不受opacity.

但是，您可以使用不透明度的背景渐变覆盖 bg-image 背景，但在您的情况下，它必须以确定的颜色结束white。

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