Question

＆＃13;

#section{
    position: absolute;
    top:0;
    height: 100%;
    width:100%;
    background: url("http://cdn9.howtogeek.com/wp-content/uploads/2010/05/ubuntu-human-1440x900.jpg") no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

＆＃13;

<body>
    <section id="section"></section>
</body>

＆＃13;

当background-size设置为cover时，图像会在窗口大小更改时更改其大小以覆盖窗口。有没有办法在开始时完全覆盖background，然后在更改窗口大小后使图像无响应？

Answer 1

如何删除background-size。图像将以原始尺寸显示。

#section{
    position: absolute;
    top:0;
    height: 100%;
    width:100%;
    background: url("http://cdn9.howtogeek.com/wp-content/uploads/2010/05/ubuntu-human-1440x900.jpg") no-repeat center;
}

<body>
    <section id="section"></section>
</body>

Answer 2

将background-size:cover;更改为background-size: 100% 100%; background-repeat: no-repeat;;

就会那样。

#div{
    position: absolute;
    top:0;
    height: 100%;
    width:100%;
    background: url("http://cdn9.howtogeek.com/wp-content/uploads/2010/05/ubuntu-human-1440x900.jpg") no-repeat center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}


<body>
    <div id="section"></div>
</body>

访问here

或者你可以使用它：

  body{
    position: absolute;
    top:0;
    height: 100%;
    width:100%;
    background: url("http://cdn9.howtogeek.com/wp-content/uploads/2010/05/ubuntu-human-1440x900.jpg") no-repeat center;
    background-size: 100% 100%;

}

  <body></body>

或者可以查看link

Answer 3

如果你想让你的背景图像在加载时填满屏幕，然后不调整大小（我会重新考虑 - 但也许我没有看到大图，没有双关语;）

一个可能的选择是将图像加载到一个单独的div中，设置z-index:-9999;（这将使div位于所有其他div之下），然后使用javascript来确定图像/ div的大小当它覆盖整个页面并使用javascript element.style.width = ""

更改div的大小

window.onload = function(){
  theWidth = document.getElementById("background").offsetWidth;
  theHeight = document.getElementById("background").offsetHeight;
  document.getElementById("background").style.width = theWidth;
  document.getElementById("background").style.height = theHeight;
}

#background{
    position: absolute;
    top:0;
    height: 100%;
    width:100%;
    background: url("http://cdn9.howtogeek.com/wp-content/uploads/2010/05/ubuntu-human-1440x900.jpg") no-repeat center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

<body>
    <section id="background"></section>
    <section id="your_content"></section>
</body>

如果你想让它不会溢出并在加载后给你水平滚动，请将背景包裹在<div style = 'max-width:100%; overflow:hidden; position:relative;'> div中 - overflow:hidden;将隐藏溢出divs界限的所有内容（就像div里面的图像保持原始宽度，而当前宽度可能更小），position:relative;需要overflow:hidden;（IIRC - 如果我没记错的话）< / p>

Answer 4

您可以在初始页面加载时通过jQuery应用.cover类，并在调整窗口大小时将其删除，如下所示：

$('section#section').addClass('cover');
$(window).on('resize', function () {
    $('section#section').removeClass('cover');
});

请参阅fiddle

覆盖背景使背景图像无响应

4 个答案: