梯度+图像背景而不重叠答案

【问题标题】：Gradient + Image Background whitout overlapping梯度+图像背景而不重叠
【发布时间】：2021-06-15 07:42:35
【问题描述】：

我正在尝试设置具有以下结构的背景：直到页面中间的渐变，并且在一定高度之后，渐变应该停止存在并且正常的图像应该出现在背景上。

我已经尝试调整我找到的每个解决方案，大约 2 个图像背景或渐变背景（位置、原点、重复、宽度、高度等），但渐变完全与我尝试过的每个解决方案中的图像重叠。

我在哪里可以找到一些材料或教程来做到这一点？

【问题讨论】：

【解决方案1】：

可能如下：

body {
  min-height:300vh;
  background:
    linear-gradient(blue,red,transparent) top/100% 50vh no-repeat,
    url(https://picsum.photos/id/1014/500/1000) center/cover;
}

【讨论】：

【解决方案2】：

这是一个完成你想做的事情的例子（据我了解）。

背景图片覆盖整个容器。然后，容器被分成相等的两半，只有下半部分得到渐变。

<html>
  <head>
    <style>
      body {
        margin: 0;
      }
     .main {
        height: 800px;
        width: 800px;
        background-image: url('https://images.unsplash.com/photo-1552058544-f2b08422138a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=644&q=80');
        background-position: center;
        background-size: cover;
      }
      .top {
        height: 50%;
        width: 100%;
      }
      .gradient{
        height: 50%;
        width: 100%;
        background-image: linear-gradient(0deg, red 50%, transparent); 
      }
    </style>
  </head>
  <body>
    <div class="main">
      <div class="top"></div>
      <div class="gradient"></div>
    </div>
  </body>
</html>

【讨论】：