So fügen Sie einem Bild mithilfe von CSS mehrere transparente Überlagerungen hinzu

Question

Wie drücke ich auf das Dreieck und füge den Inhalt über dem weißen Kreis ein? Ich versuche eine Lösung zu finden, um einen Heldenabschnitt mit einem Hintergrundbild zu erstellen, das drei Überlagerungsformen als Teil des Bildes enthält. Oben auf der Überlagerung befinden sich h1, p und btn. Ich habe unten einen Screenshot beigefügt, der zeigt, wie das Design aussehen wird.

Es gibt drei Overlays:

1. Rechteckige Form mit 0 % Transparenz unten.
2. Äußerer Kreis mit Transparenz.
3. Innerer Kreis mit Transparenz.

Das ist es, was ich bisher habe. Ich habe unten einen Ausschnitt eingefügt, und es gibt auch eine funktionierende Version auf Codepen. Der Kreis befindet sich an der richtigen Position in der unteren linken Ecke.

*{
  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;
}

  

    

      
This belongs in circle
      
This belongs in circle too.
      Learn more
    
    
  


  
Body content must be positioned right

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

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