“background-positon：center”不能与“background-attachchement：scroll”一起使用

我正在制作一个带有背景的布局。我需要将它横向和纵向居中。为此，我使用background-position：center。“background-positon：center”不能与“background-attachchement：scroll”一起使用

background-image:url('address'); 
    background-repeat:no-repeat; 
    background-position:50% 50%;

但是背景不正确positoned垂直：你只能看到一半的图像在屏幕的顶部。在这里检查它link to codepen。

作为解决方案，我尝试使用不同大小和背景位置的图像：50％50％。然后我再次检查其他背景相关选择器，发现如果我添加背景附件并将其从滚动到固定值的默认值更改为比图像居中正确。

有人可以解释为什么会发生这种情况？

来源

2016-09-24 lessismore

你codepen链接不起作用，这是最大的原因，把代码段内联一体，采用堆栈段，所以请更新等等未来的用户可以看到整个问题。 – LGSon

如果任何已发布的答案解决了您的问题，请点击您选择的答案旁边的灰色复选标记以接受答案，如果不是，请告诉我们，我们可以做出一个答案 – LGSon

它发生，如果你不给body的高度，其默认值为0

的body的高度是基于它的内容和背景图像不设置它。

这里是您展示如何需要做

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
body { 
 
    background-image: url(http://placehold.it/200); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
}

有时候，它可以创建其他问题时，一个需要给body的高度，而当，一个定位div是一个样本一个选项

#bkgdiv { 
 
    position: absolute; 
 
    left: 0; top: 0; right: 0; height: 100vh; 
 
    background-image: url(http://placehold.it/200); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
}

<div id="bkgdiv"></div>

因此，基于如何/如果你需要使用background-attachment: scroll和/或定位div的，这里是一个样品展示自己的行为时，一个滚动（和fiddle demo一起玩）

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
body { 
 
    background-image: url(http://placehold.it/200); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-attachment: scroll; 
 
} 
 
#bkgdiv { 
 
    position: absolute; 
 
    left: 0; top: 0; right: 0; height: 100vh; 
 
    background-image: url(http://placehold.it/180/0f0); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
} 
 
#bkgdivfixed { 
 
    position: fixed; 
 
    left: 0; top: 0; right: 0; height: 100vh; 
 
    background-image: url(http://placehold.it/160/ff0); 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
}

<div id="bkgdiv"></div> 
 
<div id="bkgdivfixed"></div> 
 
<div style="width: 5px; height: 150vh; background: red; margin: 5px"></div>

来源

2016-09-25 12:28:48 LGSon

如果你想给身体的背景，它真的很简单的任务。

最初你需要编写CSS的身体和HTML

html, body { 
    margin: 0; 
    height: 100%; 
}

下婷是你需要给背景的CSS的身体

body { 
    background-image: url(https://yt3.ggpht.com/-v0soe-ievYE/AAAAAAAAAAI/AAAAAAAAAAA/OixOH_h84Po/s900-c-k-no-mo-rj-c0xffffff/photo.jpg); 
    background-position: center; 
    background-repeat: no-repeat; 
}

欧凯现在的形象似乎是中心（屏幕），现在您可以使用background-size属性调整大小。

background-size: cover;

将图像放大到足以覆盖整个屏幕。

background-size: contain;

将图像放大到屏幕的高度或宽度（较小）。

你可以给固定大小给予我的尺寸，它

background-size: Xpx Ypx;

来源

2016-09-25 14:45:12

“background-positon：center”不能与“background-attachchement：scroll”一起使用

回答

相关问题