background-size：在更改浏览器大小时包含太多空格

如果我正在使用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; 
}

来源

2015-10-16 AmyCarter

我认为封面是响应式的，但有没有办法仍然没有截止云？因为这个原因，我尝试了包含，但封面确实解决了空白问题。除了封面还是包含以外，是否还有别的作品？ – AmyCarter

还是有什么我可以做的含有停止空白问题，像封面如何阻止它发生？ – AmyCarter

jsbin demo

你想要去的充分响应，但保留白云底部？

对同一元素使用两个背景图像。

切出白色底云保存为单独的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; 
}

来源

2015-10-16 17:07:14

'cover'它没有响应。当你改变浏览器的大小后台保持相同的大小 – Chris

@Chris你*认为*'封面'没有反应或你**知道**它没有反应 –

'封面'将尝试尽可能适合空间，包含'将尝试在宽度和高度上尽可能地适合空间。 http://www.w3schools.com/cssref/css3_pr_background-size。asp 在OP链接上尝试一下，看看自己的封面不能解决问题 – Chris

background-size：在更改浏览器大小时包含太多空格

回答

相关问题