5

css/html/javascript のみでグラデーションを実行し、すべての主要なブラウザーで機能する方法はありますか? (MS IE 5 以降、Firefox、Opera、Safari)?

編集：背景（ヘッダー、メインパネル、サイドパネル）に対してこれを行いたいと思います。また、縦線のグラデーションも欲しいです。

編集: 応答を読んだ後、これを Javascript ソリューションにも開放しましょう。HTML/CSS だけでは実現が難しくなるためです。

4

5 に答える 5

3

次のようなJavaScriptを使用して、これをギミックとして以前に実行しました。

var parent = document.getElementByID('foo');
for(var i=0; i< count; i++) {
    var div = document.createElement('div');
    div.style.position = 'absolute';
    div.style.width='100%';
    div.style.height = 1/count+"%";
    div.style.top = i/count+"%";
    div.style.zIndex = -1;
    parent.appendChild(div);
}

要件がグラデーションのみである場合は、css で background-image として設定されたグラデーション イメージを実際に使用する必要があります。私の場合、グラデーションの色と位置もアニメーション化していました。今のところクロスブラウザであることを保証することはできません（まず、親に何らかの位置が適用されていることを確認してください。そうしないと、絶対位置の位置コンテナにはなりません。

于 2008-12-11T20:43:32.250 に答える
2

あなたが探している実装の詳細については不明です（背景、またはウィンドウの側面に沿った単なる境界線など）。ただし、少し面倒ですが可能です。

頭に浮かぶ 1 つの例は、div などの n ブロック レベルの要素を持ち、それぞれに小さな高さ (たとえば、数ピクセル) を与えてから、後続の各要素の背景色を徐々に変更することです。

于 2008-12-11T20:00:42.947 に答える
1

colorzilla のグラデーション CSS コード ジェネレーターを使用しています: http://www.colorzilla.com/gradient-editor/

IE用のポリフィルがありますが、どこまで遡れるかはわかりません。

于 2013-02-23T18:40:33.623 に答える
0

現在、グラデーションを作成する方法はたくさんあります。1. イメージを作成できます。2. CSS3 グラデーションを使用します。線形、放射状、および繰り返しにすることができます。

linear の構文:

linear-gradient: ([angle | to ] ,[ [color-stop], [color-stop]+);

Radial の構文:

linear-gradient: ([angle | to ] ,[ [color-stop], [color-stop]+);

IE6 から IE 9 では、filter プロパティを使用するか、 CSS3Pieを使用することもできます。

以下は、役立つ参考文献です。

Mozilla MDN

CSS3ファイル

于 2013-09-09T03:21:32.160 に答える
0

短い答えはノーだと思います。

cssだけでグラデーションみたいなのも作れますが、それを画像の背景のように使うには…ちょっとやり過ぎだと思います。

編集（ばかげている感じ）

私は解決策を見つけました：http://en.wikipedia.org/wiki/JPEG

于 2008-12-11T20:27:08.557 に答える