css - 如何使图像位于另一层之后

Question

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

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

Answer 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/