Bootstrap無盡背景圖片

在此佈局中： choose Agency-Demo, 它們使用全屏背景圖像。當你開始滾動時，背景被內容（div容器）覆蓋。滾動時，可以看到背景發生變化，並再次被以下內容覆蓋。Bootstrap無盡背景圖片

他們如何根據設備的屏幕尺寸找到正確的內容定位？

他們如何根據捲動高度添加不同的類？

是否可以使用bootstraps標準功能來做到這一點？

2015-02-24 nofear87

您是否只是指在您滾動時保持固定的全寬度背景圖像？如果是這樣，那只是CSS''background-attachment：fixed;' – j08691 2015-02-24 15:24:53

不，特別是我搜索他們的方式，他們做了第一個覆蓋div的初始定位，內容是「A THEME FOR CREATIVES＆AGENCIES」滾動）以及它們如何取代背景（全屏圖像），具體取決於文檔的捲動高度。如果可能，我更喜歡唯一的CSS方式。 – nofear87 2015-02-24 15:30:09

我很困惑，因爲你提到的「創意與主題主題」部分，就是這樣一個沒有背景的部分元素。它並沒有做任何事情，但是它背後的背景（還有一點點就是上面提到的背景圖像，沒有什麼特別的做法，也沒有滾動檢測。 – j08691 2015-02-24 15:38:49

Agency-Demo使用的是css封面選擇器。封面關鍵字指定在確保其尺寸的同時縮放背景圖像以儘可能小。結果： •填充整個頁面圖像，沒有空格 •可擴展至圖像根據需要 •保留圖像的比例（縱橫比） •影像頁上居中•不引起滾動條 •作爲跨瀏覽器兼容的可能 •是不是一些花哨的把戲像Flash

.demo-header { 
text-align: center; 
background: url('assets/img/bg-header.jpg') no-repeat center center scroll; 
color: #fff; 
-webkit-background-size: cover; 
background: cover; 
padding: 100px 0; 
}

對於您可以使用下面的代碼跨瀏覽器兼容。

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

來源

2015-02-24 18:39:15 Denise

謝謝！他們如何改變那裏的導航欄？無法找到任何他們如何添加導航欄擴展類。 – nofear87 2015-03-06 17:27:02

Bootstrap無盡背景圖片

回答

相關問題