html - 如何使用 CSS 向图像添加多层透明叠加层

Question

如何按下三 Angular 形并将内容包含在白色圆圈的顶部？我正在尝试找到一种解决方案来创建一个包含背景图像的英雄部分，其中包含三个叠加形状作为图像的一部分。覆盖层顶部将是 h1、p 和 btn。我在下面提供了一张屏幕截图，展示了设计的外观。

有以下三个叠加层:

1. 直 Angular 形状，底部透明度为 0%。
2. 具有透明度的外圆。
3. 具有透明度的内圆。

这是我到目前为止所拥有的。我在下面包含了一个片段，并且在 Codepen 上也有一个工作版本。圆圈位于左下角的正确位置。

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
svg {
  width: 628;
  height: 628:
}
.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;
}
.element:before{
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 100%;0
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
}
.circle-outer {
  cx: 200;
  cy: 720;
  fill: #fff;
  fill-opacity: 0.6;
  r: 420;
  w: 628;
  h: 628;
}
.circle-inner {
  cx: 200;
  cy: 720;
  fill: #fff;
  fill-opacity: 0.6;
  r: 400;
}
.hero-triangle {
  content: '';
  position: relative; 
  width: 100%;
  height: 100px;
  background: #fff;
  -webkit-clip-path: polygon(0 8%, 0% 100%, 100% 100%);
  clip-path: polygon(0 80%, 0% 100%, 100% 100%);
  z-index: 99;
}

<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 width="1000" height="580" viewBox="0 0 100 100">
      <circle class="circle-outer" />
      <circle class="circle-inner" />
      <polygon points="0,0 0,200 1000,200" style="fill:#fff;" />
    </svg>
  </div>
</div>
<div class="container">
  <h4>Body content must be positioned right underneath hero image for all widths.</h4>

Answer 1

由于圆圈只是装饰性的而不是增加意义，因此它们没有必要成为元素。它们作为背景图像就足够了。

这是一个简单的代码片段，它放置内容元素并为其提供两个背景图像，两者都具有一定的透明度，使用径向渐变使它们成为圆形。

.element {
  position: relative;
  width: 100%;
  rmin-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;
  clip-path: polygon(0 0, 0 80%, 100% 100%, 100% 0);
  aspect-ratio: 1296 / 728;
}

.hero-content {
  position: absolute;
  left: -12.5%;
  top: 50%;
  width: 70%;
  padding-top: 5%;
  box-sizing: border-box;
  aspect-ratio: 1 / 1;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 65%, transparent 65% 100%), radial-gradient(circle, rgba(255, 255, 255, 0.2) 0 70%, transparent 70% 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  rjustify-content: center;
  flex-direction: column;
}

.hero-content h1 {
  font-size: 2vw;
}

.hero-content p {
  font-size: 1vw;
}

.hero-content button {
  font-size: 1vw;
}

<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 width="1000" height="580" viewBox="0 0 100 100">
      <circle class="circle-outer" />
      <circle class="circle-inner" />
      <polygon points="0,0 0,200 1000,200" style="fill:#fff;" />
    </svg>
    -->
  </div>
</div>
<div class="container">
  <h4>Body content must be positioned right

注意:显然您需要更改字体大小的设置以适合您的特定用例。我只是使它们相对于视口(viewport)，以便它具有响应性。

此外，我认为英雄是否必须覆盖整个宽度或设置最小高度之间存在一些混淆。当然，如果这是所需要的，那么圆圈将位于相对于苹果的不同位置，并且一些图像可能会消失。