我可以将我的 CSS 背景设置为 "bottom minus x pixels" 吗?
Can I position my CSS background to "bottom minus x pixels"?
我需要将我的背景放在屏幕底部。但是在移动设备分辨率上我想显示它比那个低 100px,比如 "bottom minus 100px"。 CSS有没有可能实现这样的事情?
是的,使用 background-position
属性 的 four-value 语法。
演示文稿
// 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+
你的情况
因此您可以将背景定位到 "bottom minus 100px":
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>
如果您使用背景 属性 使用:
.background{
background-position: center bottom -100px
}
如果您想要放置类似于背景的标签,请尝试使用:
.background{
margin-bottom -100px;
}
或
.background{
bottom: -100px;
position: absolute;
}
我需要将我的背景放在屏幕底部。但是在移动设备分辨率上我想显示它比那个低 100px,比如 "bottom minus 100px"。 CSS有没有可能实现这样的事情?
是的,使用 background-position
属性 的 four-value 语法。
演示文稿
// 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+
你的情况
因此您可以将背景定位到 "bottom minus 100px":
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>
如果您使用背景 属性 使用:
.background{
background-position: center bottom -100px
}
如果您想要放置类似于背景的标签,请尝试使用:
.background{
margin-bottom -100px;
}
或
.background{
bottom: -100px;
position: absolute;
}