爲什麼位置：絕對圖像啓用scrool酒吧？

我在頁面頂部有一個圖像作爲背景。當屏幕較大時，它應該是寬度：100％，並且不要小於1000px，而且屏幕小於1000px時不啓用scrool bar - but it enables it。如何解決這個問題？爲什麼位置：絕對圖像啓用scrool酒吧？

這裏是我的代碼：

<img alt="Bg1" src="/assets/bg1.png" style="width:100%; min-width:1000px; 
min-height:600px; height:100%; position:absolute; z-index:-1" />

更新：的jsfiddle例子 - http://jsfiddle.net/c982gko9/

PS它始終應該是在頁面的頂部，這樣的位置是：固定不能用.. 。

來源

2014-12-04 Gediminas

將它封裝在一個div中，並添加'overflow：hidden;'或製作一個jsFiddle，以便我可以查看它。 – Nick 2014-12-04 12:59:30

這裏你是：http://jsfiddle.net/c982gko9/ – Gediminas 2014-12-04 13:02:57

它總是應該在頁面的頂部，所以位置：固定不能使用... – Gediminas 2014-12-04 13:06:14

我認爲你不必添加<img>標記，語義你正在使用圖片作爲背景，它應該是背景以及！

這裏是一個解決方案，它是自適應的，仍然可以保持你的圖片的分辨率：

.overlay { 
 
    position: fixed; 
 
    left:0; 
 
    top:0; 
 
    right:0; 
 
    bottom:0; 
 
    overflow:hidden; 
 
} 
 
.overlay div { 
 
    width: 100%; 
 
    min-width: 1000px; 
 
    height: 100%; 
 
    min-height: 600px; 
 
    background-image: url(http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg); 
 
    background-size: cover; 
 
}

<div class="overlay"> 
 
    <div></div> 
 
</div>

來源

2014-12-04 13:05:33 Leo

但在較小的屏幕上的圖像會更小 - 我需要使其至少寬1000px - 因此用戶只會看到它的一角 – Gediminas 2014-12-04 13:06:48

@Gediminas更新了答案，提供了一個新的解決方案 – Leo 2014-12-04 13:16:57

解決方案：jsFiddle

body{ 
    margin:0; 
}

大多數主流瀏覽器都有默認的8像素邊距（如果我錯了，請糾正我）。

來源

2014-12-04 13:04:10 Nick

檢查，如果這是你期待什麼

http://jsfiddle.net/c982gko9/2/

爲圖像創建一個包裝div。因爲你不能告訴圖像不滾動

刪除位置：絕對的圖像和溢出：隱藏包裝div。

#wrapper { 
    overflow: hidden; 
}

來源

2014-12-04 13:14:56 Bhuvana

爲什麼位置：絕對圖像啓用scrool酒吧？

回答

相關問題