0

CSSグラデーションに使用する正しいプロパティはどれですか？以下に表示されている「background」または「background-image」。どちらも5つのブラウザすべてで動作します（私が持っているバージョンでは）。複数のチュートリアルを見てきましたが、「background」を使用するチュートリアルもあれば、「background-image」を使用するチュートリアルもありますが、いずれも、一方の方法がもう一方の方法よりも優れている理由については説明していません。

どちらもhttp://jigsaw.w3.org/css-validator/#validate_by_inputで検証されません

.gradient {
    background-color: #1a82f7;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
    background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
    background: -moz-linear-gradient(top, #2F2727, #1a82f7);
    background: -ms-linear-gradient(top, #2F2727, #1a82f7);
    background: -o-linear-gradient(top, #2F2727, #1a82f7);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#2F2727, endColorstr=#1a82f7);
}

またはこれ：

.gradient {
    background-color: #1a82f7;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
    background-image: -webkit-linear-gradient(top, #2F2727, #1a82f7);
    background-image: -moz-linear-gradient(top, #2F2727, #1a82f7);
    background-image: -ms-linear-gradient(top, #2F2727, #1a82f7);
    background-image: -o-linear-gradient(top, #2F2727, #1a82f7);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#2F2727, endColorstr=#1a82f7);
}
4

1 に答える 1

3

backgroundを使用することは、を使用することと何ら変わらないと思いますbackground-image。基本的にはbackground: url('image.png');andのようなbackground-image: url('image.png')ものです -- それらは同じものです。これは、 、、および もちろん のbackgroundようないくつかの背景プロパティを指定できる簡略化されたプロパティです。background-repeatbackground-colorbackground-image

したがって、基本的にグラデーションは として指定する必要がありbackground-imageますbackground。

W3Cバリデーターの問題については、グラデーションの「関数」がすべてブラウザー固有のプレフィックスを使用しているためだと思います。HTML5が正式になるまで、これらの機能が正式に認識されることはないと思います。

何らかの形でお役に立てば幸いです。

于 2012-08-09T20:03:19.987 に答える