封面背景使背景图像不响应

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

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

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

来源

2015-09-30 developer

我想你可以用JavaScript/jQuery的做到这一点。 – cgee

如何删除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>

来源

2015-09-30 08:40:22 nvl

如果图像很小，则不会覆盖整个背景。 – developer

您目前的代码也不会。如果你希望背景看起来不错，你不会希望它首先超越极限。 –

我不想嘲弄它。我只是想要它覆盖整个窗口。但是，当窗口大小小于图像大小时，不会缩小。 – developer

变化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

来源

2015-09-30 08:41:20

调整页面大小后，这仍将更改div（和背景图像）的大小。 –

好的我为你编辑 –

但是这会改变图像尺寸，这会使图像变得难看 – developer

，然后不再调整大小（我将重新考虑 - 但也许我没有看到大图，没有双关语意思））

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

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>

如果你希望让这个它不会溢出，并给您水平滚动加载后，包裹在后台a <div style = 'max-width:100%; overflow:hidden; position:relative;'> div - overflow:hidden;将隐藏所有c这意味着溢出那divs界限（像div里面的图像，它将在原来的宽度，而目前的宽度可能会更小）和position:relative;overflow:hidden;需要应用（IIRC - 如果我没记错的话）

来源

2015-09-30 08:44:02

也许有办法只在css中做？ – developer

也许可以 - 试试诺瓦尔的答案是否可行。他可能会参与其中。 –

你可以做通过jQuery在初始页面加载应用设备罩起来类，并删除它，当窗口被调整大小，就像这样：

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

看fiddle

来源

2015-09-30 08:46:57 Mike

图像没有完全覆盖窗口 – developer

再次检查我的小提琴，我更新了主体类https://jsfiddle.net/halloecho/jfzuhbn6/ – Mike

封面背景使背景图像不响应

回答

相关问题