我正在尝试创建一个具有居中背景图像并使用位置中心中心的页面。但是图像并没有垂直和水平居中，而是垂直延伸到页面顶部之外。我哪里/为什么会出错？
<!DOCTYPE html>
<html>
<style>
body
{
background-image:url('tumbleweed.jpg');
background-repeat:no-repeat;
background-position:center center;
background-color:#EAEAEA;
}
</style>
</html>
最佳答案
你会看到下图这样的画面吗？
body{
background-image:url(../IMG/BG/pizzaBackground.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
我认为这是因为您没有声明“高度”。
添加'height:100vh'样式。
body{
height: 100vh; /* ADD STYLE ! */
background-image:url(../IMG/BG/pizzaBackground.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
设置为100vh的原因是因为目标是body标签。
如果是不同的标签，则使用不同的值。
那就是
并添加 'margin:0px' 样式来移除滚动条。
body{
margin: 0px; /* ADD STYLE ! */
height: 100vh;
background-image:url(../IMG/BG/pizzaBackground.jpg);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
然后就可以看到了
谢谢!
关于css - 背景图像位置，中心中心不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26760647/