Question

我有一个滑块div，上面有背景图片。由于背景图像不适合（太大），因此其居中：

<div id="slider"></div><hr><hr><img src="http://hdwallpaper2013.com/wp-content/uploads/2013/02/Download-Flower-Background-Images-HD-Wallpaper.jpg" width="100%" />

#slider
{
    width: 100%;
    height: 100px;
    background-size: 100% auto;
    background-position: center;
    background-image: url('http://hdwallpaper2013.com/wp-content/uploads/2013/02/Download-Flower-Background-Images-HD-Wallpaper.jpg');
}

现在我想相对于这个居中向上或向下移动图像。我在这里看到了一种解决方案（抱歉，我能找到）：

padding-top: 10px; margin-bottom: -10px;

但只能在一个方向上工作，它只能向上推动图像。像这样向下移动是不可能的（负边距）。

有什么想法吗？

Answer 1

使用background-position属性（请参阅here）

background-position: 50% 10%;

您可以更改第二个值以垂直对齐背景。

Answer 2

demo

<强> CSS

  html, body {
    width: 100%; /* important because slider id has width set in %ge*/
    height:100%;
    margin:0;
    padding:0;
}
#slider {
    width: 100%;
    height: 100%;
    background-repeat:none;
    background-image: url('http://hdwallpaper2013.com/wp-content/uploads/2013/02/Download-Flower-Background-Images-HD-Wallpaper.jpg');
    -webkit-background-size: 100% 100%; /* browser support */
    -moz-background-size: 100% 100%;/* browser support */
    -o-background-size: 100% 100%;/* browser support */
    background-size: 100% 100%;
    background-position: top center; /*you need this one*/
}

Answer 3

background-position: center -50px;

添加到#slider应该会为您提供所需的信息。将-50px更改为您想要的任何正值或负值。

对齐背景图像中心，并相对地向上或向下（垂直）调整

3 个答案: