我可以将CSS背景定位到＆＃34;底部减去x像素＆＃34;？

Question

我需要将背景放在屏幕的底部。但是在移动设备分辨率上，我希望将它显示为低于100px，例如＆＃34;底部减去100px＆＃34;。是否有可能在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 +

在你的情况下

因此，您可以将背景定位到＆＃34;底部减去100px＆＃34;：

background-position: center bottom -100px

示例：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

请参阅MDN documentation

Answer 2

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

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

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

.background{
    margin-bottom -100px;
}

或

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