如何在一个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 Box Shadow Generator
• CSS3 Gradient Generator
• Ultimate CSS Gradient Generator (more options like color stops)

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

• Mozilla developer linear-gradient
• Mozilla developer 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中使用逗号分隔形式的多个图像并给它们一个位置：

background-image：url（../ pix / logo_quirksmode.gif），url（../ pix / logo_quirksmode_inverted.gif）;