複数のグラデーションをCSSの背景に重ねる

Question

2つのグラデーションを持つ背景を作成したいと思います。

以下の例を作成しましたが、複数のグラデーションを一緒に配置できないようです。唯一の最後の背景は背景色を含めることができ

：（例はMDN-Using multiple backgrounds & MDN-gradientに基づいて作成された）

.radial-gradient { 
 
    background: radial-gradient(red, yellow, rgb(30, 144, 255)); 
 
} 
 
.linear-repeat { 
 
    background: repeating-linear-gradient(45deg, 
 
     blue, blue 5px, white 5px, white 10px); 
 
} 
 
.combined-gradient { 
 
    background: radial-gradient(red, yellow, rgb(30, 144, 255)), 
 
    repeating-linear-gradient(45deg, blue, blue 5px, white 5px, white 10px); 
 
}

<div class="radial-gradient">radial gradient</div><br/> 
 
<div class="radial-gradient linear-repeat">linear gradient</div><br/> 
 
<div class="radial-gradient linear-repeat">combined gradient 1</div><br/> 
 
<div class="combined-gradient">combined gradient 2</div>

たぶん、次の制約は、グラデーションを重ねないようにします。

2つのグラデーションをバックグラウンドとしてレイヤ化することができない場合、どのようにレイヤーを別の方法でレイヤーする必要がありますか？

Answer 1

あなたが探しているのはこれだと思います。

コードにはどのような問題がありますか？

さて、あなたgradient is non-transparentのそれぞれ、1が完全に重複他の意志と一つだけが表示されている理由ですので。この問題を回避するには、にアルファベットのtransparencyを付けておき、背景を見渡すフェード効果を与えます。

.combined-gradient1 { 
 
    background: repeating-linear-gradient(45deg, rgba(00, 00, 255, 0.8), rgba(00, 00, 255, 0.8) 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 10px), radial-gradient(rgba(255, 0, 0, 0.8), rgba(255, 255, 0, 0.8), rgba(30, 144, 255, 0.8)); 
 
} 
 

 
.combined-gradient2 { 
 
    background: radial-gradient(rgba(255, 0, 0, 0.8), rgba(255, 255, 0, 0.8), rgba(30, 144, 255, 0.8)), repeating-linear-gradient(45deg, rgba(00, 00, 255, 1), rgba(00, 00, 255, 1) 5px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 10px); 
 
}

<div class="combined-gradient1">combined gradient 1</div> 
 
<br> 
 
<div class="combined-gradient2">combined gradient 2</div>