我如何使圖像位於另一層后面

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要簡單得多，並且在語義上也是正確的。