css - 我可以将我的 CSS 背景定位到 "bottom minus x pixels"吗？

Question

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

Answer 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