css - 定位背景图像中心底部有一些偏移

Question

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

让我们说

我们可以这样做：

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

我试过了：

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

但图像甚至不可见

我怎样才能做到这一点？（不知道元素的高度）。

• 到目前为止，我修复了它对元素应用填充（图像大小）和边距（偏移）postion:bottom center;

Answer 1

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

.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 演示

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

浏览器兼容性列表