Comment ajouter plusieurs superpositions transparentes à une image à l'aide de CSS

Question

Comment appuyer sur le triangle et inclure le contenu au-dessus du cercle blanc ? J'essaie de trouver une solution pour créer une section héros avec une image d'arrière-plan contenant trois formes superposées dans le cadre de l'image. Au-dessus de la superposition se trouveront h1, p et btn. J'ai inclus une capture d'écran ci-dessous montrant à quoi ressemblera le design.

Il y a trois superpositions :

1. Forme rectangulaire avec 0% de transparence en bas.
2. Cercle extérieur avec transparence.
3. Cercle intérieur avec transparence.

C'est ce que j'ai jusqu'à présent. J'ai inclus un extrait ci-dessous, et il existe également une version fonctionnelle sur Codepen. Le cercle est dans la bonne position dans le coin inférieur gauche.

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

Étant donné que les cercles ne sont que décoratifs et n’ajoutent aucune signification, il n’est pas nécessaire qu’ils soient des éléments. Elles suffisent comme images de fond.

Il s'agit d'un simple extrait de code qui place un élément de contenu et lui donne deux images d'arrière-plan, toutes deux avec une certaine transparence, en utilisant un dégradé radial pour les arrondir.

.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

Remarque : vous devrez évidemment modifier les paramètres de taille de police en fonction de votre cas d'utilisation spécifique. Je les fais simplement par rapport à la fenêtre pour qu'elle soit réactive.

De plus, je pense qu'il y a une certaine confusion entre si le héros doit couvrir toute la largeur ou définir une hauteur minimale. Bien sûr, si c'est ce que l'on souhaite, les cercles seront dans une position différente par rapport à la pomme et une partie de l'image pourra disparaître.