CSS body background position right bottom 不起作用

Question

我正在尝试使用 right bottom 在 body 标签的背景中放置一张背景图片，但由于某种原因，图片几乎完全看不到了。除了一个解决方案，我还想了解为什么这没有按我预期的那样工作。我将组合更改为 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 中没有任何内容，space 不足以显示图像。

示例： https://jsfiddle.net/hhs8jvgr/

CSS body background position right bottom 不起作用

CSS body background position right bottom not working

html

css

background

background-image