2

在此页面上，我有 2 个背景图片：

(1) 设置为背景图像的蓝色旭日形<html>

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

(2) 在每一页的底部出现的显示空中的一群手臂的图像。我使用粘性页脚解决方案使这个粘在每一页的底部

在正常的浏览器宽度下一切正常，但是一旦浏览器宽度低于大约 500 像素，顶部就会开始出现空白：

在此处输入图像描述

在底部

在此处输入图像描述

每一页。以前我用

background-size: cover;

对于 sunburst 图像，但这会导致网站在 iOS 6 上崩溃（严重），所以我需要找到一种方法来解决这个问题而不使用这个规则。

4

4 回答 4

2

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

于 2013-03-23T22:12:27.917 回答
2

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

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%; 在 Chrome 中无法正常工作。该问题有一个解决方法答案可能会有所帮助。

但是，如果background-size: 100%;删除width < 500px，可能在您的 @media 规则之一中，则背景会按预期填充页面。当窗口大于图像的宽度时，仍然需要该规则来拉伸图像。

于 2013-03-23T22:26:17.117 回答
0

将背景大小设置为大于 100%。我认为 200-250% 将覆盖该区域。

background-size:220%;

这样做的一个副作用是它会由于尺寸而导致轻微的滞后。

于 2013-03-23T22:28:22.793 回答
0

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

在这个文件...

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;}

仅供参考，正如andyb指出的那样，空白是图像离开其顶部位置居中，从而使它看起来像一个开始出现的空白。

希望你明白这一点。

问候

于 2013-03-23T22:54:09.110 回答