如何用CSS仅为背景图片的部分区域设置透明度？

我想给header元素的背景图片仅底部区域添加透明度，预期效果是背景图从下往上逐渐透明。目前已经把图片设为header的背景，但尝试用mask-image没成功。

我的HTML代码：

<header>
      <img src="images/logo.svg" />
      <h1>A history of everything you copy</h1>
      <p>
        Clipboard allows you to track and organize everything you copy.
        Instantly access your clipboard on all your devices.
      </p>
    </header>

原有CSS代码：

body {
  font-family: "Bai Jamjuree", sans-serif;
  text-align: center;
}

@media (min-width: 1200px) {
  header {
    width: 100%;
    background-image: url(images/bg-header-desktop.png);
    background-size: 100%;
    background-repeat: no-repeat;
    padding-top: 50px 150px;
  }
}

h1 {
  color: hsl(210, 10%, 33%);
  font-size: 35px;
  margin-bottom: 15px;
}

header > p {
  color: hsl(201, 11%, 66%);
  font-size: 18px;
}

尝试过的无效代码（使用mask-image）：

@media (min-width: 1200px) {
  header {
    width: 100%;
    background-image: url(images/bg-header-desktop.png);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1), transparent 74%);
    background-size: 100%;
    background-repeat: no-repeat;
    padding-top: 50px 150px;
  }
}

请问有没有办法用CSS实现仅背景图底部区域透明的效果？

可行方案1：正确配置mask-image（带浏览器前缀） #

你的思路是对的，问题出在缺少浏览器前缀和部分mask属性配置。修改后的CSS如下：

@media (min-width: 1200px) {
  header {
    width: 100%;
    background-image: url(images/bg-header-desktop.png);
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 50px 150px; /* 修正原padding写法错误 */
    /* 添加完整的mask属性，包含WebKit前缀 */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0) 74%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0) 74%);
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}

关键说明：

• 浏览器前缀：WebKit内核浏览器（Chrome、Safari等）需要-webkit-前缀才能识别mask属性；
• 渐变方向：to bottom明确表示从上到下渐变，顶部完全显示背景图，74%位置开始完全透明；
• padding修正：原代码padding-top: 50px 150px;写法错误，改为padding: 50px 150px;同时设置上下内边距和左右内边距。

可行方案2：伪元素叠加渐变遮罩（兼容性更好） #

如果mask属性在部分老旧浏览器仍有问题，可以用伪元素实现：

@media (min-width: 1200px) {
  header {
    width: 100%;
    position: relative; /* 为伪元素提供定位上下文 */
    background-image: url(images/bg-header-desktop.png);
    background-size: 100%;
    background-repeat: no-repeat;
    padding: 50px 150px; /* 修正padding写法 */
  }

  header::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 渐变从透明过渡到页面背景色（这里假设是白色），实现底部遮罩效果 */
    background: linear-gradient(to bottom, transparent, #ffffff 74%);
    pointer-events: none; /* 不干扰header内元素的点击交互 */
  }
}

这个方法是在header上方叠加一层渐变遮罩，视觉上让背景图底部区域逐渐消失，兼容性覆盖所有支持伪元素和线性渐变的浏览器。

内容的提问来源于stack exchange，提问作者Magdalena