我想使頁面縮放或移動兼容我認爲是術語。我的網頁現在的問題是它看起來不錯，但是當我拖動瀏覽器時，我的頁面的背景圖片覆蓋了「服務」標題<section>部分。拖動瀏覽器導致背景圖像重疊下一節

這裏是jsFiddle：http://jsfiddle.net/eg18dfy0/4/不知道這將是多麼有用，因爲本地文件不包括在這裏。

正常： enter image description here

Dragging功能：

enter image description here

這裏是我的代碼：

HTML代碼段的事項：

<header> 
    <div class="background_image"> 
    </div> 
    <div class="welcome-text-container"> 
    <div class="row"> 
     <div class="welcome-text1">Welcome!</div> 
     <div class="welcome-text2">BE GOOFY, TAKE A PICTURE!</div> 
     <div class="btn-row"> 
     <a href="#services" class="welcome-btn btn-lg">TELL ME MORE</a> 
     </div> 
    </div> 
    </div> 
</header> 

<!-- services --> 
<section id="services"> 
    <div class="container"> 
    <div class="service-title">Services</div> 
    <div class="service-caption">What we'll do for you</div> 
    </div> 
</section>

CSS：

.background_image { 
    background-image: image-url("header-bg.jpg"); 
    background-size: contain; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 0; 
    padding-top: 66.64%; 
    position: absolute; 
    /* (img-height/img-width * width) */ 
    /* (853/1280 * 100) */ 
} 

/* Services */ 

#services { 
    padding-top: 110px; 
    margin-top: 75px; 
} 

.service-title { 
    text-align: center; 
    font-size: 55px; 
    font-weight: 700; 
} 

.service-caption { 
    text-align: center; 
    font-size: 20px; 
}

來源

2014-11-17 Liondancer

您可以使用小提琴左側的「外部資源」選項卡包含外部資源。如果它不能重現問題，那麼創建小提琴就沒有意義。 –

或更改'image-url（「header-bg.jpg」）'到你服務器上的文件的url – artm

這樣做^^^^^^^^ – Timothy

這應該解決您的問題：

Fiddle illustrating fix

你設置的背景圖像這是基於文檔的流動越來越高堆疊優先級的DIV，所以它重疊你的後續divs。

這是我加入到解決問題的CSS：

.container > div.background-image { 
    z-index: 1; 
} 

.container > div { 
    position: relative; 
    z-index: 2; 
}

有更好的方法來做到這一點（即不創建一個背景圖像的單獨的div），但是這將解決您的問題沒有大的變化記錄結構。

對於佔位符圖像來說，所有功勞歸於http://placehold.it。如果你打算在StackOverflow上解決CSS問題，那麼這是一個挽救生命的方法。

來源

2014-11-17 02:26:54

謝謝你的幫助，但我解決了這個問題，在我的CSS中刪除了background_image，並添加了這個位[header-header-image：image-url（「header-bg.jpg」）; \t background-size：cover; \t background-position：center center; }' – Liondancer

這是解決這個問題的另一種方式，但不要在該區域放置任何可點擊的元素，然後您的原始'background-image' div會與它們重疊。 –

拖動瀏覽器導致背景圖像重疊下一節

回答

Fiddle illustrating fix

相關問題