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

Question

三角形を押して、白い円の上にコンテンツを含めるにはどうすればよいですか?画像の一部として 3 つのオーバーレイ形状を含む背景画像を使用してヒーロー セクションを作成する解決策を見つけようとしています。オーバーレイの上には h1、p、btn が表示されます。デザインがどのように見えるかを示すスクリーンショットを以下に示します。

オーバーレイは 3 つあります:

1. 長方形の形状、底部の透明度は 0% です。
2. 透明性のある外側の円。
3. 透明性のある内側の円。

これが私がこれまでに持っているものです。以下にスニペットを示しました。Codepen には実用的なバージョンもあります。円は左下隅の正しい位置にあります。

リーリー リーリー

Answer 1

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

これは、コンテンツ要素を配置し、それに放射状のグラデーションを使用して丸くするある程度の透明度を持つ 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; }

  

    

      
これはサークルに属します

      
これもサークルに属します。

      ＃＃＃もっと詳しく知る＃＃＃
    
    
      
      
      
  


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



 注: 明らかに、特定の使用例に合わせてフォント サイズの設定を変更する必要があります。応答性が高くなるように、ビューポートを基準にしてそれらを作成するだけです。 

また、ヒーローが幅全体をカバーする必要があるのか​​、それとも最小の高さを設定する必要があるのか​​について、混乱があると思います。もちろん、これが望ましい場合は、円はリンゴに対して異なる位置に配置され、画像の一部が消える可能性があります。