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

Question

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

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

Answer 1

为了防止这种情况，您应该使用 background-attachment: fixed; ，使用它，将防止图像沿着页面滚动。这将使图像在后面保持静态。

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

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

Answer 2

使用 CSS3 属性background-size：

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

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

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/