Question

我想定位到背景图像的底部，但给它一些垂直偏移。

让我们说

我们可以这样做：

.img{
     background-position: 5px center; /* top + 5px */
}

我试图：

.img{
     background-position: -5px center; /* bottom - 5px ?? */
}

但图像甚至不可见

我该如何实现？（不知道元素的高度）。

到目前为止，我修复了使用postion:bottom center;

Answer 1

使用：before和：之后可以获得结果（使用精灵图像的确切位置。）

.img{
    position: relative;
}

.img:after {
    left: 50%;
    bottom: -5px;
    content: '';
    width: 32px;
    height: 32px;
    margin-left: -16px;
    position: absolute;
    background-position: 0 0;
}

.img:before {
    left: 50%;
    top: 5px;
    content: '';
    width: 32px;
    height: 32px;
    margin-left: -16px;
    position: absolute;
    background-position: -15px -30px;
}

Answer 2

不是CSS2，而是CSS3。使用background-position，您可以提供position或negative偏移。

您可以执行以下操作：

<强> JSFiddle Demo

<强> HTML ：

<div class="box"></div>

<强> CSS ：

.box {
    width:300px;
    height:300px;
    background: url(http://placehold.it/100x100) no-repeat bottom -10px right -20px;
    border:2px solid red;
}

<强> Browser compatibility list

位置背景图像中心底部有一些偏移

2 个答案: