2015-10-16 44 views
3

如果我正在使用background-size:contain;,如何在瀏覽器大小更改時消除空格?background-size:在更改瀏覽器大小時包含太多空格

使用較小的瀏覽器尺寸時,圖像和文本之間的空白太多了。網站是:http://16debut.com/test.html

CSS是:

body { 
    margin:0px 0px; 
} 

#hero { 
    background-clip: content-box; 
    background-image: url("imgtop.png"); 
    background-size: contain; 
    background-repeat: no-repeat; 
    position: relative; 
    height: 235vh; 
} 

#content { 
    padding: 100px 50px; 
    text-align: center; 
    width: 80%; 
    margin: 0px auto; 
} 

#content h2 { 
    margin: 0px 0px 30px 0px; 
} 

#footer { 
    padding: 30px 0px; 
    text-align: center; 
    background: #ddd; 
} 
+0

我認爲封面是響應式的,但有沒有辦法仍然沒有截止雲?因爲這個原因,我嘗試了包含,但封面確實解決了空白問題。除了封面還是包含以外,是否還有別的作品? – AmyCarter

+0

還是有什麼我可以做的含有停止空白問題,像封面如何阻止它發生? – AmyCarter

回答

2

jsbin demo

你想要去的充分響應,但保留白雲底部?

對同一元素使用兩個背景圖像。

enter image description here

  • 切出白色底雲保存爲單獨的PNG圖片。用作第一個背景圖像。
  • 可選)再次保存您的大圖像,只是沒有白雲。將該圖像用作第二個背景圖像值。

現在,在CSS:

  • 設置雲background-position: bottom和100%尺寸( 「寬度」)
  • 設置爲中心(50%)位置的更大的圖像和cover

CSS

html, body{height:100%; margin:0;} 

#hero{ 
    position:relative; 
    height:130vh; /* USE THE RIGHT RATIO since the image Logo is a bit up*/ 
    background: no-repeat 
    url(http://i.stack.imgur.com/eWFn6.png) bottom/100%, /* BOTTOM CLOUDS OVERLAY */ 
    url(http://i.stack.imgur.com/IVgpV.png) 50%/cover; /* BIG IMAGE */ 
} 

HTML

<div id="hero"></div> 

<div class="other"> 
    <h1>Other Divs</h1> 
    <p>bla bla</p> 
</div> 

看來,Safari瀏覽器是一個非常愚蠢的瀏覽器(它們適用於Windows,甚至刪除支持,因爲2012 ...驚人)。這裏的jsBin example和css:

#hero{ 
    position:relative; 
    height: 900px; 
    height: 100vh; 
    background: url(http://i.stack.imgur.com/eWFn6.png) no-repeat bottom, url(http://i.stack.imgur.com/IVgpV.png) 50%; 
    background-size: 100%, cover; 
} 
+0

'cover'它沒有響應。當你改變瀏覽器的大小後臺保持相同的大小 – Chris

+0

@Chris你*認爲*'封面'沒有反應或你**知道**它沒有反應 –

+0

'封面'將嘗試儘可能適合空間,包含'將嘗試在寬度和高度上儘可能地適合空間。 http://www.w3schools.com/cssref/css3_pr_background-size。asp 在OP鏈接上嘗試一下,看看自己的封面不能解決問題 – Chris

相關問題