Question

我有一个使用id设置的背景图像，我希望身体的背景为黑色，因此当背景图像加载时，用户将看到黑色而不是默认背景颜色。

当我通过CSS将背景设置为黑色时，无法再看到背景图像，它已经落后于黑色背景，我如何让图像显示在顶部和图像背后的黑色？

（我已经尝试将z-index设置为200或者其他东西但是没有用，所以我把它放回-100我想要的地方）

HTML：

<img src="Background_optimized_more.jpg" name="fsbg" width="2022" height="1460" id="fsbg">

CSS：

html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: #000;   
}

#fsbg {

    width: 100%;
    height: auto;
    position: fixed;
    z-index: -100;
    left: 0px;
    top: 0px;
    min-height: 100%;
    min-width: 1040px;
}

Answer 1

background将优先于更具体的规则。请尝试使用background-color：

background-color: #000;

然后，要指定背景图像，请使用background-image。

Answer 2

使用CSS将背景图像应用于您的身体，并使用它指定颜色。在此示例中，背景图像下方有黑色背景色。 background-size: cover;可确保您的背景很好地扩展。

了解更多on background-size here.

了解更多about CSS backgrounds here.

Have a fiddle!

CSS

body {
    background: #000 url('http://www.placehold.it/500') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Answer 3

您的z-index位于-100

这会使图像落后于你的背景。

设置大于0

设置背景颜色与背景图像

3 个答案: