Bootstrap - 使用傳送帶作爲固定背景

我試圖在Bootsrap的幫助下創建響應站點，但遇到了一些問題（由於缺乏經驗）。Bootstrap - 使用傳送帶作爲固定背景

主要想法是創建一個簡單的Bootstrap corousel，它應該是一個固定的或稍微移動的背景（例如 - https://modernthemes.net/demo/?theme=proper），以便在向下滾動頁面之後，其餘內容將溢出此背景。

我現在已經是 - HTML：

<header id="myCarousel" class="carousel slide"> 

    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="1"></li> 
     <li data-target="#myCarousel" data-slide-to="2"></li> 
    </ol> 

    <!-- Wrapper for Slides --> 
    <div class="carousel-inner"> 

     <div class="item active"> 
      <!-- Set the first background image using inline CSS below. --> 
      <div class="fill" style="background-image:url(static/header/1st.jpg);"></div> 
     </div> 
     <div class="item"> 
      <!-- Set the second background image using inline CSS below. --> 
      <div class="fill" style="background-image:url(static/header/2nd.jpg);"></div> 
     </div> 
     <div class="item"> 
      <!-- Set the third background image using inline CSS below. --> 
      <div class="fill" style="background-image:url(static/header/3rd.jpg);"></div> 
     </div> 
    </div> 
</header>

CSS：

.carousel, 
.item, 
.active { 
    height: 100%; 
} 

.carousel-inner { 
    height: 100%; 
} 

.fill { 
    width: 100%; 
    height: 100%; 
    background-position: center; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; 
    -o-background-size: cover; 
}

但我不知道我應該使用

no-repeat center center fixed;

或別的東西來獲得類似（如https://modernthemes.net/demo/?theme=proper）的結果。

我已經發現了一些類似的話題，但沒有一個在我的情況下正常工作。這就是爲什麼我會非常感謝幫助。

來源

2015-11-27 Moveton

正如您在示例中看到的那樣（https://modernthemes.net/demo/?theme=prope），背景具有固定的位置，並且隨着滾動，圖像像幻燈片的其餘部分一樣上升，但背景圖像的位置變化看起來像它是固定的。

來源

2015-11-27 13:12:44

嗯..是的，這就是我已經在我的帖子中提到）我只需要弄清楚如何使用Bootstrap旋轉木馬來製作這個固定的背景。 – Moveton

Bootstrap - 使用傳送帶作爲固定背景

回答

相關問題