如何用CSS实现带透明多层覆盖的英雄区并调整内容与图形位置

我要创建一个英雄区，包含背景图和三个覆盖形状，同时需要把h1、p标签和按钮放在覆盖形状上方，目前遇到两个问题需要解决：

• 将三角形向下移动
• 让内容置于白色圆形上方
  另外需确保所有宽度下，主体内容都紧贴英雄图下方。

三个覆盖形状分别是：

• 底部为0%透明度的直角形状
• 带透明度的外圆
• 带透明度的内圆

当前代码已将圆形置于左下方正确位置，需调整上述问题。

1. 下移三角形 #

修改SVG内<polygon>标签的points属性，调大y轴数值实现下移；同时将SVG设为绝对定位固定在英雄区底部，避免影响主体布局。

2. 内容置于圆形上方 #

给.hero-content设置position: relative并提高z-index，确保内容层级高于SVG覆盖层。

3. 主体内容紧贴英雄区 #

将SVG设置为绝对定位固定在英雄区底部，这样英雄区高度不会被SVG额外撑开，主体内容自然紧贴下方。

HTML #

<div class="container">
  <div class="element">
    <div class="hero-content">
      <h1>This belongs in circle</h1>
      <p>This belongs in circle too.</p>
      <button class="btn btn-primary">Learn more</button>
    </div>
    <svg viewBox="0 0 1000 720">
      <circle class="circle-outer" />
      <circle class="circle-inner" />
      <polygon points="0,520 0,720 1000,720" style="fill:#fff;" />
    </svg>
  </div>
</div>
<div class="container">
  <h4>Body content must be positioned right underneath hero image for all widths.</h4>
</div>

CSS #

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.element {  
  position: relative;
  width: 100%;
  min-height: 628px;
  background: url(https://images-prod.healthline.com/hlcmsresource/images/AN_images/health-benefits-of-apples-1296x728-feature.jpg) no-repeat center top;
  background-size: cover;
  overflow: hidden; /* 防止SVG超出英雄区 */
}
.hero-content {
  position: relative;
  z-index: 10; /* 确保内容在SVG上方 */
  padding: 50px; /* 根据需求调整内边距 */
  color: #333; /* 调整文字颜色，保证在半透明圆形上清晰可见 */
}
svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}
.circle-outer {
  cx: 200;
  cy: 720;
  fill: #fff;
  fill-opacity: 0.6;
  r: 420;
}
.circle-inner {
  cx: 200;
  cy: 720;
  fill: #fff;
  fill-opacity: 0.6;
  r: 400;
}

• 移除无用的.element:before和.hero-triangle样式，改用SVG内的<polygon>实现三角形，将points的y值从200改为520，让三角形下移至英雄区底部。
• SVG设置绝对定位固定在英雄区底部，不额外占用高度，确保主体内容紧贴英雄区。
• .hero-content添加相对定位和更高的z-index，保证内容显示在SVG覆盖层上方。
• 给.element添加overflow: hidden，避免SVG超出英雄区范围。

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