有没有办法使用 CSS 将渐变透明度添加到 div 的特定点？

Question

我正在尝试在我的个人网站上复制 Apple TV+ 智能电视应用程序的效果，其中背景上有渐变模糊，一直到网页的某个点，但一旦进一步向下滚动，模糊就会向上移动并覆盖网页的整个背景图片。

与在 Apple TV+ 智能电视应用程序上观看电视节目或电影时类似，背景上有一种渐变模糊，一直延伸到屏幕上的特定点；但是当您进一步向下（例如查看电视节目的其他剧集或电影的特殊功能）时，模糊会覆盖整个背景，而背景图像保持固定。

我在我的网站上设置了一个 div，其中包含覆盖整个背景图像的模糊背景滤镜：

<div class="blurred-mask-container"></div>

并像这样设置我的 CSS：

.blurred-mask-container {
  top: 0;
  bottom: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  backdrop-filter: blur(100px);
  z-index: -1;
}

我的目标是从 div 顶部的透明开始渐变透明度，然后在 800px 左右模糊，特别是当我从页面中添加/删除元素时，网页最终会变成这样。

最初，我尝试在 div 中设置两个子 div：两者都具有相同的背景滤镜，只有顶部的一个高 800 像素并具有透明遮罩，而底部的则只有一个没有遮罩的背景滤镜。然而，模糊效果有一个非常明显的中断，即带有渐变蒙版的顶部 div 的底部与没有渐变蒙版的底部 div 的顶部相交；所以现在我正在尝试在一个 div 中实现这种效果。

然而，到目前为止，我在网上找到的每个教程或指令集（包括此处）似乎都只有将渐变透明度应用于图像的步骤，例如 div 内的图像，或网站上而不是网站上的背景图像。 div 悬停在只有背景滤镜的背景图像上。任何帮助解决这个问题的帮助将不胜感激。

Answer 1

这是你想要的方式吗？

body {
    margin: 0;
}

.content {
    font-family: arial;
    color: #fff;
}

.image {
    background-image: url("https://www.stockvault.net/data/2019/08/31/269064/preview16.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vH;
}

.description {
    position: absolute;
    top: calc(100vH - 200px);
    height: 200px;
    background-image: linear-gradient(0deg, #777, transparent);
    background-repeat: repeat-x;
    width: 100%;
}

.description h1, .description p {
    margin-left: 130px;
    margin-bottom: 0px;
}

.description h1 {
    margin-top: 70px;
}

.description p {
    margin-top: 10px;
}

<div class="content">
    <div class="image"></div>
    <div class="description">
        <h1>Cool title</h1>
        <p> Some description</p>
    </div>
</div>