Question

在this page我有2张背景图片：

（1）蓝色森伯斯特被设置为<html>

的背景图像

html {
    background: url("BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg") no-repeat fixed center center / 100% auto transparent;
    outline: 0 none !important;
}

（2）显示每页底部出现的空中手臂的图像。我使用sticky footer解决方案将其粘贴到每个页面的底部

在正常浏览器宽度下一切正常，但一旦浏览器宽度低于约500px，就会在顶部出现一个空格：

enter image description here

并在底部

enter image description here

每页的

。以前我用过

background-size: cover;

对于旭日形象，但是这导致网站崩溃了iOS 6上的浏览器（严重），所以我需要找到一种方法来解决这个问题而不使用这个规则。

Answer 1

如果您不反对JS解决方案，可以尝试使用Backstretch。

Answer 2

空白是由于浏览器定位了CSS中定义的图像center center。

html {
    background: url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
    background-size: 100%;
    outline: 0!important;
}

我认为解决方案只是设置background-size: 100% 100%，因为background-size: 100%;的当前设置是100%宽度和自动高度。但它在Chrome中被窃听 - background-size:100% 100%; doesn't work properly in Chrome。这个问题有一个可能有帮助的解决方法。

但是，如果background-size: 100%;的{{1}}被删除，可能是在您的某个@media规则中，则背景会按预期填充页面。当窗口大于图像的宽度以拉伸图像时，仍然需要该规则。

Answer 3

将背景大小设置为大于100％的值。我认为200-250％将涵盖该领域。

background-size:220%;

这有一个副作用是由于尺寸导致轻微滞后。

Answer 4

在这里，有这个解决方案......

在此档案中......

http://festivals.ie/static/C5z61WeZeCfyTRbmu6lNPsxXxwhibmxExq6ADwtSPjh.css

第793行，

这段代码就在那一行的最后一部分......

html{background:url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size:100%;
outline:0!important;}

添加此属性：background-position：0px 0px;

制作代码：

 html{background:url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size:100%;
outline:0!important;
background-position: 0px 0px;}

和fyi一样，andyb指出白色空间是图像的顶部位置居中，从而使它看起来像一个白色空间开始出现..

希望你明白这一点。

此致

浏览器狭窄时背景图像显示不正确

4 个答案: