2

http://www.templatemonster.com/demo/39055.html

インターネットをサーフィンしているときに、背景に自然なグラデーションがあるウェブサイトをたくさん見てきました。私が理解できないことは...どうやってそれをしたのですか? Photoshop で作成された画像ファイルではないと思います。グラデーションは、Web ブラウザーの画面サイズに応じて自然に適切にサイズ変更されているようです...だから、CSS に違いないと思ったのですが...見つかりませんどのコードが実際に仕事をしているのか:/

誰かがそれがどのように行われたか教えてもらえますか?

4

2 に答える 2

2

シンプルな背景画像です。

style.css、6 行目:

body {background:#fff url(../images/body-bg.jpg) 50% 50%; ...
于 2012-07-09T01:13:08.520 に答える
2

これは jsFiddle の CSS3 ソリューションです。

時間の経過とともに、これは重い背景画像よりも好まれるようになります: それらの作成、維持、提供、ダウンロード、キャッシュ。CSS3 では、これらの手順は不要になりました。

代わりに、CSS3 Radial-gradient を使用し、ジェネレーターで必要なものを調べてください。コードは次のとおりです。

/* IE10 Consumer Preview */ 
background-image: -ms-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Mozilla Firefox */ 
background-image: -moz-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Opera */ 
background-image: -o-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(radial, center center, 0, center center, 506, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: radial-gradient(circle farthest-corner at center, #FFFFFF 0%, #00A3EF 100%);

A. 今のところ、クロス ブラウザーをレンダリングできるように、ベンダー プレフィックスが必要です。

B. 書くのは難しいですか。いいえ、それは些細なことです！これも CSS3 の新しいやり方です。「CSS3 ジェネレーター #what you need#」を参照してください。この場合は放射状グラデーションでした。しかし、ボックス シャドウ、テキスト シャドウ、変換、アニメーションなどについても同じことができます。

これは、約 100 の多様な CSS3 ジェネレーターの一例です。

これはopacity を含む別の jsfiddleです。サンプル画像に近づいています。

于 2012-07-09T01:49:44.503 に答える