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/

Answer 2

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

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

编辑：如果您询问背景图片是如何保留的，您还可以添加background-attachment:fixed;。这比制作具有固定位置的单独div更简单，并且它在语义上也是正确的。

如何使图像落后于其他图层

2 个答案: