Question

我有一些论坛页面，并有可能对其进行评论，因此页面会根据页面上的评论数量变大。现在我的背景明显拉伸，但问题是我的形象看起来很糟糕。所以我知道当我使用带有图案的图像时它看起来不会很糟糕，但是有不同的方法来使用普通背景而不是让它看起来很糟糕吗？这是我的CSS顺便说一句：

background-size:cover;
background-image:url('lol.jpg');
background-repeat:no-repeat;

Answer 1

使用CSS3属性background-size：

#selector {
    background-size: 100% auto; /* width and height, can be %, px or whatever */
}

自2012年起，这适用于现代浏览器。

Answer 2

为了防止这种情况，您应该使用background-attachment: fixed;，使用此功能，将阻止图像沿页面滚动。这样可以使图像保持静止。

selector {
   background-image: url(YOUR_URL_HERE);
   background-size: cover;
   background-attachment: fixed;
}

Info，如果您有兴趣使用简写语法而不是编写每个属性。

Answer 3

选择其中一个

<强> CSS3

background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

<强> T1

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

<强> T2

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

<强>的jQuery

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

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

$(window).load(function() {    

    var theWindow        = $(window),
        $bg              = $("#bg"),
        aspectRatio      = $bg.width() / $bg.height();

    function resizeBg() {

        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg
                .removeClass()
                .addClass('bgheight');
        } else {
            $bg
                .removeClass()
                .addClass('bgwidth');
        }

    }

    theWindow.resize(resizeBg).trigger("resize");

});

http://css-tricks.com/perfect-full-page-background-image/

拉伸时背景图像看起来很糟糕

3 个答案: