用BG顏色在div上添加圖片

所以我第一次使用Square Space爲我的婚禮建立一個網站。用BG顏色在div上添加圖片

現在，當您在主頁上向下滾動時，會出現一些視差滾動，以引發下一部分。這是什麼樣子：

而是具有苛刻的行是下一個div的內容的容器，我想補充的樹木另一排在最重要的是DIV所以它看起來是這樣的：

然後樹木當你向下滾動向上和關閉屏幕上移動。

到目前爲止，它看起來像我只能自定義CSS而不是實際的HTML文件。我不確定如何在CSS中執行此操作。

當我檢查的股利，這是在CSS出現：

#content-wrapper .content { 
width: 100%; 
background-color: #54535f; 
position: relative; 
z-index: 50; 
} 
.content.has-main-image { 
box-shadow: 0 0 75px rgba(0,0,0,.1); 
}

任何人都可以使用此代碼幫助嗎？如果我可以訪問HTML並且可以創建另一個div，我可以輕鬆完成它，但我不知道如何使用CSS來完成此操作。

謝謝！

來源

2016-02-28 Kelsey Kronmiller

做的第一圖像（樹）有'fixed'背景附件？如果你給我們一個現場演示，它會更容易幫助你 – Aziz

對不起，自從我在審判時，它還沒有生活。我只是去購買它，所以這裏它是生活：http://www.meetusinthemountains.net/ 忽略所有的佔位符的東西。我從字面上只做了頭到目前爲止haha –

所以我懷疑，背景有'固定'附件，造成視差效應。在這一點上，你必須決定是否要禁用特定的視差效果，或者只是像這樣淡化另一個盒子> http://puu.sh/noUJL/bd1042768d.jpg – Aziz

這樣做的一種方法是爲評論中討論的黑樹創建一個單獨的圖層。由於您無法修改HTML結構，因此我們將爲#content-wrapper .content div創建一個pseudo selector，它基本上是一個背景層，用於獲取深色樹木，而身體獲取沒有樹木的背景。

第一步是將身體背景改變爲沒有深色樹木的圖像。

然後，添加此CSS：

#content-wrapper .content:before { 
    content: ""; /* required for psuedo selectors to work */ 
    display: block; /* makes sure element is a block box */ 
    position: absolute; /* make sure element does not affect layout */ 
    left: 0; right: 0; width: 100%; /* makes sure element stretches */ 
    height: 400px; 
    top: -350px; /* offset element from content box so it appears above it */ 
    z-index: -1; /* make sure element does it overlap other elements */ 
    background: url(http://i.imgur.com/xx72pbB.png) no-repeat 50% 44%; 
    background-size: cover; 
}

另外，我注意到，在內容框不匹配的黑暗之樹的顏色background-color，正確的值應該是：#585862

#content-wrapper .content { 
    width: 100%; 
    background-color: #585862; /* was #51535c */ 
    position: relative; 
    z-index: 1; /* was 50, change to 1 to prevent overlapping */ 
} 

.content-inner { 
    background-color: #585862; /* was #51535c */ 
    max-width: 960px; 
    margin: 0 auto; 
    padding: 100px 8%; 
}

優點

保持視差效應
HTML結構
增加深度的任何修改

缺點

輕微增加頁面加載時間（因爲使兩個HTTP請求）

最終的結果應該是這樣的：

來源

2016-02-28 23:41:57 Aziz

這工作完美。非常感謝！ –

用BG顏色在div上添加圖片

回答

相關問題