CSS：直線的なグラデーションを逆に繰り返す

グラデーションの背景が交互に繰り返されるようにする方法はありますか？私は、次のCSS持っている現時点では：CSS：直線的なグラデーションを逆に繰り返す

html { 
 
    background: white; /* For browsers that do not support gradients */ 
 
    background: -webkit-linear-gradient(blue, white); /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(blue, white); /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(blue, white); /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(blue, white); /* Standard syntax */ 
 

 
    background-size: cover; 
 
    height: 100%; 
 
} 
 

 
body { 
 
    height: 100%; 
 
}

<html> 
 
    <head> 
 
    </head> 
 
    <body 
 
    Hello world 
 
    </body> 
 
</html>

を現在それが青から白のトップへ下へ行くが、私はスクロールダウンすると、それが青から白の例：再び繰り返されます。 blue->white; blue->white; blue->...。私はそれがblue -> white -> blue -> white ->...から行くことを望みます。

出典

2016-08-10 Barry Michael Doyle

背景ような何かではない理由：線形グラデーション（青、白、青）。これから調整しますか？ –

これは似たようなものです。私はあなたがその背景を持っていることを理解していますし、ある行動では逆効果を望んでいますね。 http://stackoverflow.com/questions/19318534/inheriting-the-inverse-gradient-of-theelements-background –

次のようにあなたはそれを達成するためにrepeating-linear-gradientを使用することができます。

html { 
 
    background: white; 
 
    background: repeating-linear-gradient(blue, white 100vh, white 100vh, blue 200vh); 
 
    height: 1980px; 
 
} 
 

 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
}

出典

2016-08-10 07:31:39

ありがとう、それは完全に働いた:) –

@BarryDoyleあなたはようこそ） –

高さを取り除く：100％;身体から、あなたのページをきれいにするためにそれを

またはこのウェブサイトをチェックをチェックhttp://colorzilla.com/gradient-editor

出典

2016-08-10 07:27:58 mosawi

を私はあなたが持っている理解その背景といくつかのアクションでは、逆の効果が必要です。このためにはtransform: scaleY(-1)を使用できます。子要素が親スタイルを継承しないようにするには、勾配を:before{}の擬似要素で使用します。

div{ 
 
    height: 100px; 
 
    width:100%; 
 
    float:left; 
 
    margin-top:20px; 
 
} 
 
.div1 { 
 
    background: white; /* For browsers that do not support gradients */ 
 
    background: -webkit-linear-gradient(blue, white); /* For Safari 5.1 to 6.0 */ 
 
    background: -o-linear-gradient(blue, white); /* For Opera 11.1 to 12.0 */ 
 
    background: -moz-linear-gradient(blue, white); /* For Firefox 3.6 to 15 */ 
 
    background: linear-gradient(blue, white); /* Standard syntax */ 
 
    background-size: cover; 
 
} 
 

 
.div2 { 
 
    -webkit-transform: scaleY(-1); 
 
    transform: scaleY(-1); 
 
}

<body> 
 
<div class="div1"></div> 
 
<div class="div1 div2"></div> 
 
</body>

出典

2016-08-10 08:42:04

CSS：直線的なグラデーションを逆に繰り返す

答えて

関連する問題