0

まず: http://jsfiddle.net/83FDf/

「メニュー」の背景として設定された画像があります...青のグラデーションがあり、角が丸く、下部には白があり、青のメニューの下にわずかな影があります。

私のイメージ

1 つの div で純粋な css を使用して再作成することは可能ですか?

html:

<div class="main_content"></div>

CSS:

.main_content
{
    width:900px;
    height:auto;
    background:url(http://i.imgur.com/mionT7y.jpg) no-repeat center top #fff;
    margin:0 auto;
    padding:0 0 50px;
}
4

2 に答える 2

1

確かに可能です。シャドウとグラデーションに必要なルールの量は、異なる構文を必要とするブラウザーが異なるためであることに注意してください ( -moz-Firefox のベンダー プレフィックスなど)。クロスブラウザー グラデーションとボックス シャドウを簡単に作成するための便利なツールをいくつか紹介します。

線形グラデーションとボックス シャドウの詳細については、こちらをご覧ください。

jsフィドル

.main_content
{
    width:100%;
    height:auto;
    margin:0 auto;
    padding:0 0 50px;
    /*background-color:#00F;*/

    /* Add rounded border to top left and top right */
    border-top-left-radius:6px;
    border-top-right-radius:6px;

    /* Apply the gradient as a background image */
    background-image: linear-gradient(bottom, rgb(79,110,189) 0%, rgb(44,188,207) 100%);
    background-image: -o-linear-gradient(bottom, rgb(79,110,189) 0%, rgb(44,188,207) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(79,110,189) 0%, rgb(44,188,207) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(79,110,189) 0%, rgb(44,188,207) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(79,110,189) 0%, rgb(44,188,207) 100%);
    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(79,110,189)),
        color-stop(1, rgb(44,188,207))
    );

    /* Apply white shadow on bottom */
    -webkit-box-shadow: 0px 4px 10px rgba(255, 255, 255, 0.75);
    -moz-box-shadow:    0px 4px 10px rgba(255, 255, 255, 0.75);
    box-shadow:         0px 4px 10px rgba(255, 255, 255, 0.75);
}

body {
    margin:0;
    background-color:gray;
}
于 2013-04-06T05:30:51.423 に答える
1

あなたの質問について私が理解したことのうち、CSSで複数の画像をコンマ区切り形式で使用して、それらに位置を与えることもできます：

背景画像: url(../pix/logo_quirksmode.gif), url(../pix/logo_quirksmode_inverted.gif);

于 2013-04-06T05:31:40.330 に答える