1

ある種のフォーラム ページとそれにコメントする可能性があるので、ページに配置されたコメントの量に応じてページが大きくなります。現在、私の背景は明らかに引き伸ばされていますが、問題は私の画像が非常に悪く見えることです. パターン付きの画像を使用すると見栄えが悪くならないことはわかっていますが、通常の背景を使用して見栄えを悪くしない別の方法はありますか? これは私のCSSです：

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

3 に答える 3

1

CSS3 プロパティを使用しますbackground-size。

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

これは、2012 年以降の最新のブラウザーで利用できます。

于 2013-10-21T08:10:32.137 に答える
0

そのうちの1つを選択してください

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/

于 2013-10-21T08:16:26.327 に答える