Question

我正在尝试放置背景图像，以便在div的顶部和底部留下50px的空间。

我可以通过此属性轻松将背景图像定位在顶部50px

background-position: 0 50px;

但是，我如何定位这个背景图像，以便底部有50px的空间支撑

我试过这个

 background-position: 0 50px 0 50px;

但这似乎不起作用。我假设它接受4个参数来从4个方向定位它。

有什么想法吗？

Answer 1

尝试使用background-clip属性：

padding-top:50px;
padding-bottom:50px;
background-clip: content-box;

请参阅此小提琴：http://jsfiddle.net/A5u8j/

Answer 2

不幸的是，我不相信这是可能的。根据它的用途，您可以使用两个div，内部div具有背景图像和顶部＆amp;底部边距为50px;

Answer 3

尝试添加这两个属性

background-size: 500px 400px;
background-position: 0 50px;

Answer 4

你不能用背景位置这样做;但是，你可以使用伪元素一起破解某些东西。

http://jsfiddle.net/sXLg7/3/

这是更新的CSS：

.test {
    border: 2px solid red;
    height: 500px;
    width: 500px;
    position: relative;
}
.test:before {
    content: '';
    z-index: -1;
    background-image: url("http://www.reallyslick.com/pictures/helios.jpg");
    background-repeat: no-repeat;
    position: absolute;
    top: 50px; left: 0; right: 0; bottom: 50px;
}

Answer 5

您可以使用CSS background-size，但browser support is somewhat limited。

.test {
    border: 2px solid red;
    background-image: url("http://www.reallyslick.com/pictures/helios.jpg");
    background-position: 0 50px;
    background-size:100% 400px;
    height: 500px;
    width: 500px;
    background-repeat: no-repeat;
}

Working Example

替代方法

或者，您可以使用两个嵌套元素。外部有顶部和底部设有衬垫，以便内部不会到达顶部/底部。

我已经使用了CSS box-sizing，以便在高度中考虑填充。请注意，对此的支持也是somewhat limited。

Working Example

或者，您可以从外部元素的高度中减去填充。

Working Example

Answer 6

这是一种方式。放置具有绝对定位和负z-index的图像。将它放在测试div中的任何内容之后。

http://jsfiddle.net/sXLg7/8/

HTML

<div class="test">
    Text on top of background.
    <img src="http://www.reallyslick.com/pictures/helios.jpg" class="background"/>
</div>

和css

.test {    
border: 2px solid red;
height: 500px;
width: 500px;
overflow: hidden;
position: relative;
color: #fff;
}

.test .background {
    position: absolute;
    bottom: 50px;
    left: 0;
    z-index: -1;
}

Answer 7

你可以在元素上放置一个50px的边框。

http://jsfiddle.net/sXLg7/10/

HTML

<div class="test"></div>

CSS

.test {
  outline: 2px solid red;
  border: 50px solid transparent;
  background-image: url("http://www.reallyslick.com/pictures/helios.jpg");
  background-position: center;
  background-size: auto 100%;
  height: 500px;
  width: 500px;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

Answer 8

为什么不添加50px的保证金？像这样：

.test {

    border: 2px solid red;
    background-image: url("http://www.reallyslick.com/pictures/helios.jpg");
    height: 500px;
    width: 500px;
    background-repeat: no-repeat;
    margin:50px;

}

http://jsfiddle.net/4Dmkv/

定位背景图片 - 顶部为x，底部为x

8 个答案:

替代方法