Question

每当背景图像发生变化时，我需要它覆盖身体。我使用的是background-size: cover，但它似乎无法运作。

body {
   position: relative;
   margin-top: 60px;
   background-color: #000;
   font-family: 'Roboto Slab', serif;
   background: url(https://i.ytimg.com/vi/lECC6eQhnZo/maxresdefault.jpg); 
   background-repeat: no-repeat;
   background-position: center center;
   background-atachment: fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   transition: background 1s;

这里是改变图像的jQuery：

$("body").css("background", objects[newNum].img);

图像存储在数组（对象）中。

CodePen：http://codepen.io/Chantun/pen/WxXaGy?editors=0010

Answer 1

背景封面是正确的工作。默认身高：自动。使用最小高度：100vh用于身体。并将margin-top更改为padding-top。

body {
  min-height: 100vh;
  padding-top: 60px;
}

Codepen

Answer 2

将您的codepen上的background-attachment更改为两个t而不是一个确实会让我觉得您想要它的工作方式。您还可以将您的背景规则组合成简写，如：

background: #000 url(https://i.ytimg.com/vi/lECC6eQhnZo/maxresdefault.jpg) center center / cover no-repeat;
background-attachment: fixed;

Answer 3

您需要将背景的用法更改为背景图像。因为它与background-size冲突。

因此，对于你的CSS，它将是：

body {
   position: relative;
   margin-top: 60px;
   background-color: #000;
   font-family: 'Roboto Slab', serif;
   background-image: url(https://i.ytimg.com/vi/lECC6eQhnZo/maxresdefault.jpg); 
   background-repeat: no-repeat;
   background-position: center center;
   background-atachment: fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   transition: background 1s;

对于你的JS应该是：

$("body").css("background-image", objects[newNum].img);

Answer 4

只是抬头！

background-attachment: fixed和background-size: cover不能很好地互相玩耍！：（

有关他们如何以及为何与此发生冲突的详细说明：https://stackoverflow.com/a/23811091

编辑：您的background-attachment: fixed拼写错误！：）

背景尺寸：封面;属性

4 个答案: