background-size：cover;财产

每当背景图像变化时，我需要它来覆盖身体。我使用的是background-size: cover，但它似乎不起作用。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

来源

2016-07-29 Chantun

你需要改变你的背景的用法背景图像。因为它与背景大小冲突。

因此，对于你的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);

来源

2016-07-29 12:38:16 Ubie

谢谢！这很简单。 – Chantun

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

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

Codepen

来源

2016-07-29 12:17:06

只是抬起头来！

background-attachment: fixed和background-size: cover不会很好地玩对方！ :(

他们如何以及为何发生冲突这里更详细的解释：https://stackoverflow.com/a/23811091

编辑：！还您background-attachment: fixed拼写错误:)

来源

2016-07-29 14:58:56

您codepen更改background-attachment有两个T的，而不是一个人做它工作如何，我认为你想要它。你也可以结合你的背景规则，如速记：

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

来源

2016-07-29 15:28:14

background-size：cover;财产

回答

相关问题