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

Question

Comment puis-je 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 existe les trois superpositions suivantes : Forme à angle droit avec 0 % de transparence en bas. Un cercle extérieur avec transparence. Cercle intérieur avec transparence. Voici 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 situé

P粉610028841 · Answer

É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.
      
    
    
  


  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.