不重叠的渐变+图片背景

Question

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

我已经尝试调整我发现的每一个解决方案，大约有 2 个图像背景或渐变背景（位置、原点、重复、宽度、高度等），但是在我尝试过的每个解决方案中，渐变完全覆盖了图像。

我在哪里可以找到能够做到这一点的一些 material 或教程？

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

Answer 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>

不重叠的渐变+图片背景

Gradient + Image Background whitout overlapping

html

css

background