css - 如何在一个 div 标签中制作多个背景？

Question

首先：http: //jsfiddle.net/83FDf/

我有一个图像设置为我的“菜单”背景......它有蓝色渐变，圆角，然后在底部有白色，蓝色菜单下有轻微的阴影。

是否可以在一个 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;
}

Answer 1

确实有可能，请注意阴影和渐变所需的规则数量是由于不同的浏览器需要不同的语法（-moz-是 Firefox 供应商前缀等）。这里有一些方便的工具，可以轻松实现跨浏览器渐变和框阴影。

• CSS3 盒子阴影生成器
• CSS3 渐变生成器
• Ultimate CSS Gradient Generator（更多选项，如颜色停止）

在此处阅读有关线性渐变和框阴影的更多信息：

• Mozilla 开发人员线性渐变
• Mozilla 开发者 box-shadow

jsFiddle

.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;
}

Answer 2

根据我对您的问题的理解，您可以在您的 css 中以逗号分隔的形式使用多个图像并给它们一个位置：

背景图像：url（../pix/logo_quirksmode.gif），url（../pix/logo_quirksmode_inverted.gif）；