1

background-imageCSSを上から下へのグラデーションにしてから、色にしたいと思います。たとえば、上が #FF0000 で、上から 400 ピクセルが #00FF00 で、その後すぐに #EFEFEF に切り替わるグラデーションが必要な場合は、どうすればよいでしょうか? 使用できる形式はありbackground-image-repeatますか？

4

3 に答える 3

4

実際のプロパティは と呼ばれbackground-repeatます。background-sizeグラデーションの高さを 400 ピクセルに制限し、タイリングしないようにするには、 と組み合わせて使用​​する必要があります。

html {
    background-color: #efefef;
    background-image: linear-gradient(#ff0000, #00ff00);
    background-repeat: no-repeat;
    background-size: 100% 400px;
}

jsFiddle プレビュー

もちろん、これは CSS3 グラデーションを使用していることを前提としています。その場合、CSS3 グラデーションを実装するすべてのブラウザーは .xml も実装するため、ブラウザーのサポートは問題になりませんbackground-size。ただし、グラデーションに画像ファイルを使用していて、古いブラウザーをサポートする必要がある場合は、適切な高さと位置を持つ追加の要素または疑似要素を作成して、グラデーションだけを含める必要があります。

于 2012-09-09T20:44:18.337 に答える
3

はい、background-colorグラデーションを使用し、適切なbackground-repeat&を設定しますbackground-size。

デモ

background: #EFEFEF linear-gradient(#FF0000, #00FF00) repeat-x;
background-size: 1px 400px;
于 2012-09-09T20:43:59.977 に答える
0

グラデーションに 3 番目のストップを追加することもオプションです (グラデーションをサポートしているが背景サイズをサポートしていないブラウザーがある場合)。2 番目と 3 番目のストップを 400px に配置し、3 番目のグラデーションの色を目的の背景色にします。

于 2012-09-10T02:37:40.470 に答える