我可以将我的 CSS 背景定位到“底部减去 x 像素”吗？答案

【问题标题】：Can I position my CSS background to "bottom minus x pixels"?我可以将我的 CSS 背景定位到“底部减去 x 像素”吗？
【发布时间】：2016-04-13 05:28:29
【问题描述】：

我需要将背景放在屏幕底部。但在移动设备分辨率上，我想显示比它低 100 像素，比如“底部负 100 像素”。有没有可能在 CSS 中实现这样的事情？

【问题讨论】：

您是在背景中使用背景位置属性还是在所有内容后面使用图像标签？需要查看您的代码。
您应该将 HTML 标记与其他 CSS 依赖项一起添加，这比没有它的回答更容易猜测。

标签： css position background-position

【解决方案1】：

是的，使用 background-position 属性的四值语法。

演示文稿

// This two-value declaration
background-position: center bottom
// Is equivalent of this four-value declaration
background-position: center 0px bottom 0px

免责声明：支持 Chrome 25+、Firefox 13+、IE9+、Safari 7+

你的情况

因此您可以将背景定位到“底部负 100 像素”：

background-position: center bottom -100px

示例：

.container {
  height: 190px;
  padding: 1em;
  margin: 0 auto 1em;
  border: 1px solid #333;
  text-align: center;
  
  background-image: url('http://lorempixel.com/200/140/city/4');
  background-repeat: no-repeat;
  background-position: center bottom;
}
.plus {
  background-position: center bottom 20px;
}
.minus {
  background-position: center bottom -20px;
}

<div class="container">
    background-position:<br>
    center bottom
</div>
<div class="container plus">
    background-position:<br>
    center bottom 20px
</div>
<div class="container minus">
    background-position:<br>
    center bottom -20px
</div>

见MDN documentation

【讨论】：

你的意思一定是：背景位置：中心底部-100px； codepen.io/anon/pen/LGyLGN
这取决于您要以哪种方式移动背景。
好吧，他要求底部负 100px ... ;)
你是对的。所以我改变了。谢谢。我觉得很混乱，我们通常指的是屏幕顶部的位置。他的意思可能是“100vh - 100px”
注意：你实际上不能使用center 0px bottom 0px：你不能定义“离中心100px”（到哪里？）。它仅适用于 top、bottom、left 和 right。

【解决方案2】：

如果您使用的是背景属性，请使用：

.background{
    background-position: center bottom -100px
}

如果您想定位类似于背景的标签，请尝试使用：

.background{
    margin-bottom -100px;
}

或

.background{
    bottom: -100px;
    position: absolute;
}

【讨论】：