位於Bootstrap容器內的元素後面的全寬度背景？

Question

我已經用Bootstrap 3編寫了一個非常基本的雙列着陸頁，使用一個容器。

我希望整個頁面有兩個完整瀏覽器寬度的背景，頂部是一個簡單的帶紋理的背景，底部是純白色，扇形邊緣（重複x背景可能位於底部頂部背景的div）作爲兩者之間的邊界。

但我想要的是背景在特定按鈕的中間後面的垂直點處完全過渡，這當然會根據瀏覽器窗口和設備而變化（並且佈局本身是響應式的）。

這甚至可能嗎？

我已經絞盡腦汁，並沒有提出任何理性的解決方案，因爲容器div（不是全角），還有其他幾個div，它們位於該按鈕的上下。

你怎麼會去嗎？會喜歡只有CSS的解決方案，但是也可以使用jQuery插件。

感謝您的幫助！

編輯：有些代碼可以幫助說明內容是什麼樣子嗎？

<div id="container"> 
<div class="row logo"> 
    <img src="/logo.png" class="col-md-2"> 
</div> 

<div class="row"> 
<img src="/images/cookie.jpg" class="col-md-6"> 

    <div class="col-md-5 col-md-offset-1"> 
    <h1 class="headline">Text here</h1> 
<button type="button" class="btn btn-lg btn-block">Button text</button> <br /> 
    Some other stuff here 
    </div> 
    </div> <!-- main row --> 

    <hr> 

    <div class="row footer"> 
    Some text 
    </div> <!--footer row --> 
</div> <!-- container --> 

Answer 1

這是我從你的設計目標所理解的最接近的東西。顯然，該設計只能在一定範圍內工作，並且在滿足最小和最大寬度約束條件時，需要一些設計決策（包括媒體查詢）來更改佈局。

http://jsfiddle.net/zyglobe/2tQGZ/5/

<div class="wrap"> 
    <div class="container top"> 
    <p>Some text ipsum dolor sit amet volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Pellentesque molestie eleifend varius. Sed facilisis justo vitae tristique condimentum. Nulla imperdiet nulla vitae augue placerat, ac vulputate nisl volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
    <img class="bad" src="http://placehold.it/180x200"> 
    </div> 
    <div class="container bottom"> 
    <button>Button</button> 
    <p>Some text at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Suspendisse ornare in velit at molestie. Nam eu ligula a sem pulvinar viverra elementum eu ligula. Aenean posuere velit purus, eget luctus eros lacinia ut. Nam fringilla nulla sit amet neque consectetur, id euismod metus mattis. </p> 
    </div> 
</div> 

圖像和按鈕將需要相對於被定位成在頂部和底部的容器之間的邊界。其餘的內容將需要知道這個空間，而不是與它相交。

button {position:absolute;top:0;right:0px;height:40px;padding:0 20px;margin:-20px 40px 0 0;} 

img.bad {position:absolute;bottom:-100px;left:14px;z-index:500;} 

.top {padding:20px 10px 30px;} 

.bottom {padding:30px 10px 20px;} 

懶惰造型的道歉。但是你明白了，可以應用適當的語義。希望這篇文章有助於您解決設計挑戰。