如何使图像位于另一层后面答案

【问题标题】：How Do I make an image go behind an other layer如何使图像位于另一层后面
【发布时间】：2014-07-01 07:30:44
【问题描述】：

示例[1]http://themeforest.net/item/skilt-a-wordpress-theme-for-frequent-bloggers/7936499?ref=tbd

我如何获得图像的影响如何有背景图像然后是文本的背景颜色（额外，我可以让文本背景沿着顶部流动）？我知道我在问一个模糊的问题，但我仍然是个小问题。 ^_^ 谢谢（如果你能回答，请提前）。

【问题讨论】：

谢谢 (/◕ヮ◕)/ .....

【解决方案1】：

该网站有一个带有背景图像的 div，该背景图像具有固定的位置并覆盖整个浏览器窗口。

body {
    background-color: #0c0c0c;
}

#background-image { 

    opacity: 0.7;
    background-image: url(some_image.jpg);

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    background-position: center;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    width: 100%;
    height: 100%;
}

使用这样的 HTML：

<div id="background-image"></div>
<div class="container>
    <div id="content">
        <p>Lorem ipsum some stuff</p>
    </div>
</div>

这是一个非常酷的效果，您应该尝试在您制作的网站上复制它。继续努力，直到你弄明白为止。

这是一个很好的起点：http://css-tricks.com/perfect-full-page-background-image/

【讨论】：

谢谢...向更多人解释了很多:)

【解决方案2】：

您始终可以使用 CSS 同时设置背景图片和背景颜色：

body {
  background-image:url(url/to/your/image);
  background-color:#CCCCCC;
}

编辑：如果您询问背景图像如何保持原位，您还可以添加background-attachment:fixed;。这比制作一个固定位置的单独 div 要简单得多，而且在语义上也是正确的。

【讨论】：