Yahoo.comでは、明るい灰色のボディグラデーションの背景が本当に好きです。（灰色のフェードだけ）
しかし、私は彼らがこの効果を大きくするために使用する画像を見つけることができません。
Yahooがこの背景効果を作成するために使用する画像/コードを知っている人はいますか？
1345 次
5 に答える
3
それは画像です：http： //l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png
CSSを見ると、次のことがわかります。
background-image: url(http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20100521.png);
background-repeat: repeat-x;
それは他のみんなが指摘していることです。しかし、他の誰も指摘していない部分は、次のこともあるということです。
background-position: 0px -2335px;
これはオフセットを定義するので、表示される背景は実際には画像のずっと下まで開始されません。
表示されているグラデーションは、白から灰色、次に透明です。この方法でグラデーションを作成するには、ページの色をグラデーションの最後の範囲に等しく設定する必要があります。したがって、そのCSSを見ると、次のこともわかります。
background-color: #E8EDF0;
これで、yahoo.comに現在表示されているグラデーションが完成します。
また、＃E8EDF0がその背景画像の最後の不透明な色の正しい16進コードであることを確認しました。
于 2010-08-27T20:26:36.280 に答える
0
画像アプリで、開始が非常にわずかに暗くなり、終了するグラデーションを作成します
于 2010-08-27T20:12:16.573 に答える
0
FireBugやChromeのInspectElement、さらにはIEのDeveloperのものを使用して、HTML要素のスタイルを確認してください。
于 2010-08-27T20:14:15.057 に答える
0
また、多くの初心者が理解していない良い点は、たとえば高さ100ピクセル、幅10ピクセルのグラデーション画像を作成することです。次に、次のようなcssスタイルを使用します。
body {background：url（'backgroundImage / png'）repeat-x; }
repeat-xは、画像を水平方向に繰り返します。
于 2010-08-27T20:17:47.327 に答える
0
現在のyahooの背景には次のCSSプロパティがあります
body{
background: url(http://l1.yimg.com/a/i/ww/met/th/slate/gsprite_pg_slate_20110124.png) left -2335px repeat-x; /*unsupported fallback*/
background: -moz-linear-gradient(top, #fdfdfd, #e8edf0 1000px); /*Firefox*/
background: linear-gradient(top, #fdfdfd, #e8edf0 1000px); /*Standard*/
background-color: #dce2e7;
background-attachment: scroll;
}
于 2013-09-24T05:36:20.030 に答える