4

当我调整窗口大小时，我似乎无法让我的背景适合我的浏览器。请帮忙！这里有一些图片来告诉你发生了什么：查看图片 第一张图片是它应该如何安装，第二张是我水平拉伸它的时候，第三张是我垂直拉伸的时候（对不起，不知道为什么它上传了我的图片两次）

这是我正在使用的代码：

body {
    background: url('images/bkg-img.png');
    repeat: no-repeat;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}
4

3 回答 3

2

问题在于background-size: cover覆盖了背景定位区域（参见W3C 页面），在某些情况下，也就是计算出的正文高度。并不总是和窗户一样高！

我发现的最简单的解决方案也是放一个

 html {height:100%}

在样式表中。但是您可能需要对您的设置进行一些试验才能使其以您想要的方式工作。我很确定它因浏览器而异，并且取决于您使用的是标准模式还是怪癖模式。

于 2013-04-25T19:08:43.540 回答
1

有很多方法可以做到这一点，如果你将图像设置为background-image身体，它不会缩小或扩大，它会保持不变，这是预期的行为。

你可以使用某物。像这样：

<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>

和他们的风格：

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

为了能够将您的内容放在背景图像之上，请将您的内容放在另一个 div 中，例如：

<div class="pagewrap">
    <p>Content</p>
</div>

它的类别：

.pagewrap {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

查看演示或其他技术，关于z-index。

于 2013-04-25T18:41:43.043 回答
0

固定图像

如果您不需要背景图像随页面滚动，您仍然可以将背景图像应用于body标签，如果您设置background-attachment: fixed;

body {
    background: url('images/bkg-img.png') no-repeat 0 0 fixed;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

jQuery

如果 bg 图像确实需要随页面滚动，则可能值得应用一些 JavaScript 或 jQuery 代码，以保持 HTML 和 CSS 相对简单。

function stretchBg(width, height, contain) {
    var pageWidth  = $(document).width();
    var pageHeight = $(document).height();

    if ((pageWidth / pageHeight) > (width / height) == !!contain)
        $('body').css({backgroundSize: 'auto ' + pageHeight + 'px'});
    else
        $('body').css({backgroundSize: pageWidth + 'px auto'});
}

$(document).ready(function(){ stretchBg(640, 480); });   // Page load
$(window).resize(function(){  stretchBg(640, 480); });   // Browser resize

JSFiddle Demo   （和独立版本的演示）

为了保持纵横比，图像的原生宽度和高度被传递给上述函数，以及可选的第三个参数，用于 bg 图像是否应该覆盖或包含页面（默认为封面）。

或者，这里有一个更高级的演示（和独立版本），它会自动检测当前应用于 body 标签的 bg 图像的原始分辨率。下面是一个使用它的例子：

$(document).ready(function(){
    FullBodyBackground.init({contain: false});
});
于 2013-04-25T19:53:43.563 回答