Question

我正在尝试使用body在right bottom标记的背景中放置背景图像，但由于某种原因，图像几乎完全不在视图中。除了解决方案，我还想了解为什么这不符合我的预期。我将组合更改为其他设置，例如left bottom，静止图像不在视野范围内。

图片是这样的：https://i.stack.imgur.com/fpKuw.jpg?s=328&g=1

body {
	background-image: url(https://i.stack.imgur.com/fpKuw.jpg?s=328&g=1);
	background-repeat: no-repeat;
    background-position:  right bottom; 
}

<body>

</body>

Answer 1

body还没有足够的height来获得按预期呈现的图片，所以您可以通过以下几种方式进行渲染：

设置html, body { height:100%}

html,
body {
  height: 100%
}
body {
  background: url(https://i.stack.imgur.com/fpKuw.jpg?s=328&g=1) no-repeat right bottom;

}

设置body { height:100vh}

body {
  background: url(https://i.stack.imgur.com/fpKuw.jpg?s=328&g=1) no-repeat right bottom;
  height: 100vh
}

Answer 2

这是因为body中没有任何内容，因此没有足够的空间显示图像。

实施例： https://jsfiddle.net/hhs8jvgr/

CSS正文背景位置右下方不起作用

2 个答案: