如何用CSS实现图片底部弧形遮罩效果？

问题 #

想要实现图片底部弧形遮罩效果（参考效果：），尝试了clip-path方案，自己写的代码如下，但最终效果不符合预期（当前效果：），请问如何调整代码实现目标效果？

我的代码 #

HTML

<div class="mask-section">
  <div class="content">
    <h1>This is Test</h1>
  </div>
</div>

CSS

.mask-section {
    background-color: white;
}
.content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
    border-radius: 0 0 90% 90% / 15em;
  overflow: hidden;
  width: 100%;
  height: 300px;
  background-image: url(https://i.pinimg.com/originals/5e/f6/83/5ef68313994aaf68e87d190de943f104.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.content:before {
  content: '';
  position: absolute;
  background-color: rgba(0,0,0,0.5);
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.content h1 {
  text-align: center;
  text-transform: uppercase;
  color: white;
  z-index: 0;
}

解决方案 #

当前代码用border-radius给容器加弧形时，容器背景会被裁切，但无法实现“底部弧形遮罩露出下方白色”的效果。改用clip-path可以精准控制图片的显示区域，同时同步处理遮罩层，调整后的代码如下：

修改后代码 #

HTML

<div class="mask-section">
  <div class="content">
    <h1>This is Test</h1>
  </div>
</div>

CSS

.mask-section {
  background-color: white;
}
.content {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 300px;
  background-image: url(https://i.pinimg.com/originals/5e/f6/83/5ef68313994aaf68e87d190de943f104.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 创建底部弧形裁切区域 */
  clip-path: ellipse(100% 85% at 50% 0%);
}
.content:before {
  content: '';
  position: absolute;
  background-color: rgba(0,0,0,0.5);
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  /* 遮罩层同步裁切形状 */
  clip-path: inherit;
}
.content h1 {
  text-align: center;
  text-transform: uppercase;
  color: white;
  /* 确保文字显示在遮罩上方 */
  z-index: 1;
}

关键调整说明 #

1. clip-path弧形裁切：ellipse(100% 85% at 50% 0%)表示创建一个宽度为容器100%、高度为容器85%的椭圆，中心点在顶部中间，这样底部会形成弧形缺口，露出下方的白色背景。调整第二个数值（如80%/90%）可以改变弧形的弧度大小。
2. 遮罩层同步裁切：给.content:before添加clip-path: inherit;，让半透明遮罩和图片保持一致的裁切形状，避免遮罩超出弧形区域。
3. 文字层级修正：将文字的z-index设为1，确保文字显示在半透明遮罩的上方。

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