1

http://www.latlong.net/のような Web サイトの背景を作成しようとしていますが、うまくいきません。この緑と灰色の背景は 1 つの画像ですか、それとも上部の緑色の画像と灰色の背景ですか?

バックグラウンドが何を持っているかを確認するためのcssが見つかりません。余分なGoogleマップcssがたくさんあるので、ごちゃごちゃになっています。

上部と下部の灰色を横切ってストリップを行うために彼らが何をしているのか誰にもわかりますか?

ありがとう！

4

6 に答える 6

3

これは、Chrome 開発者ツールを使用して要素を調べることで確認できます: https://developers.google.com/chrome-developer-tools/

背景色と下の境界線と影を使用してヘッダー要素をスタイリングしているようです。

header {
    margin-bottom:10px;
    background-color: #D7E6B8;
    background: -moz-linear-gradient(center top , #F8F8F8, #D7E6B8) repeat scroll 0 0 transparent;
    border-bottom: 1px solid #B5B09A;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
于 2013-04-02T04:42:09.947 に答える
1

その中に背景画像はありません。すべてCSSの背景色と影です。次のようにしてみてください。

header {
    background: -moz-linear-gradient(center top , #F8F8F8, #D7E6B8) repeat scroll 0 0 transparent;
    border-bottom: 1px solid #B5B09A;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
}

body {
    background-color: #EBEDE7;
}
于 2013-04-02T04:49:30.753 に答える
1

これは画像ではなく、背景色の css 属性です。次のようなことができます：

<header>私のヘッダー</header>

CSSで：

ヘッダー { 背景色: #D7E6B8 }

ページの本文には、灰色の背景用の css を含めることができます。

body { 背景色: #EBEDE7 }
于 2013-04-02T04:42:06.777 に答える
0

特定のページでは次のクラスが使用されます。

header {
    background: -moz-linear-gradient(center top , #F8F8F8, #D7E6B8) repeat scroll 0 0 transparent;
    border-bottom: 1px solid #B5B09A;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
}


body {
    background-color: #EBEDE7;
}
于 2013-04-02T04:45:12.753 に答える