CSS を使用して画像に複数の透明なオーバーレイを追加する方法

Question

三角形を押して白い円の上にコンテンツを含めるにはどうすればよいですか?画像の一部として 3 つのオーバーレイ形状を含む背景画像を使用してヒーロー セクションを作成する解決策を見つけようとしています。オーバーレイの上には h1、p、btn が表示されます。デザインがどのように見えるかを示すスクリーンショットを以下に示します。次の 3 つのオーバーレイがあります。 下部の透明度が 0% の直角形状。透明度のある外側の円。透明感のある内側の円。これが私がこれまでに持っているものです。以下にスニペットを示しました。Codepen には実用的なバージョンもあります。サークルの位置は

P粉610028841 · Answer

円は単なる装飾であり、意味を追加するものではないため、要素である必要はありません。背景画像としては十分です。

これは、コンテンツ要素を配置し、それに放射状のグラデーションを使用して丸くするある程度の透明度を持つ 2 つの背景画像を与える単純なコードスニペットです。

＃＃＃。要素 { 位置: 相対的; 幅: 100%; rmin-高さ: 628px; 背景: URL(https://images-prod.healthline.com/hlcmsresource/images/AN_images/health-benefits-of-apples-1296x728-feature.jpg) リピートなしの中央上部。背景サイズ: カバー; クリップパス: ポリゴン(0 0, 0 80%, 100% 100%, 100% 0); アスペクト比: 1296 / 728; } .hero-content { 位置: 絶対; 左: -12.5%。トップ: 50%; 幅: 70%; パディングトップ: 5%; ボックスのサイズ設定: ボーダーボックス; アスペクト比: 1 / 1; 背景画像：radial-gradient(circle, rgba(255, 255, 255, 0.8) 0 65%, 透明 65% 100%)、radial-gradient(circle, rgba(255, 255, 255, 0.2) 0 70% 、透明 70% 100%); 背景リピート: リピートなし; 背景サイズ: 100% 100%; ディスプレイ: フレックス; 整列項目: 中央; rjustify-content: 中央; フレックス方向: 列; } .hero-content h1 { フォントサイズ: 2vw; } .hero-content p { フォントサイズ: 1vw; } .hero-content ボタン { フォントサイズ: 1vw; }

  
    
      これはサークルに属します
      
これもサークルに属します。
      ＃＃＃もっと詳しく知る＃＃＃
    
    
      
      
  


  
本文コンテンツは右に配置する必要があります



 注: 明らかに、特定の使用例に合わせてフォント サイズの設定を変更する必要があります。応答性が高くなるように、ビューポートを基準にしてそれらを作成するだけです。 
 また、ヒーローが幅全体をカバーする必要があるのか、それとも最小の高さを設定する必要があるのかについて、混乱があると思います。もちろん、これが望ましい場合は、円はリンゴに対して異なる位置に配置され、画像の一部が消える可能性があります。