'background-image'プロパティに同じ値を持つ複数の背景イメージについて。

Question

.div{ 
 
      width: 200px; 
 
      height: 200px; 
 
      border-top:20px solid black; 
 
      border-bottom:20px solid black; 
 
      background-position: 0%,100%; 
 
      -webkit-background-size: 20px 100%; 
 
      -moz-background-size: 20px 100%; 
 
      background-size: 20px 100%; 
 
      background-repeat: no-repeat; 
 
      background-image: linear-gradient(to bottom, red, green), linear-gradient(to bottom, red, green); 
 
     }

<div class="div"></div>

私は、複数の背景を使用する場合は、なぜ背景画像のプロパティで同じ値に設定が、最初の背景画像はとても混乱しています第二image.Iに覆われていない、誰もが知っていますか？ありがとうございます;

大変申し訳ございませんが、ご迷惑をおかけして申し訳ございません。

background-image:linear-gradient(to bottom, red, yellow),linear-gradient(to bottom, red, yellow); 

と同じ他のbackgroundプロパティを設定し、これを見て：

background-position:0%,100%; 
background-size:20px 100%; 

を 私の平均は、私は、2枚の背景画像を設定し、これを見て、直線勾配で「背景画像」プロパティのための2つの値を設定しています

2つの背景画像はすべて同じプロパティなので、最初の背景画像は2番目の画像でカバーする必要がありますが、左右に表示されません。なぜですか？

background-size:20px 100%; 

Answer 1

このスタイルは、背景の水平方向のサイズは20ピクセルであることを意味しています。値は1つだけなので、両方のグラデーションに適用されます。

この他のスタイル

background-position:0%,100%; 

は、2つの値を持っているので、最初は、最初のグラデーションに適用されます。この場合、位置0％は完全な左を意味します。 2番目の勾配に適用され、100％は完全な権利を意味します。

この差は、垂直位置に適用されるが、勾配は、100％の大きさを有しているので、それは何の効果