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

Question

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

比方說

同樣，我們可以這樣做：

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

我想：

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

但圖像甚至不會可見

哪有我做到了？（不知道元素的高度）。

• 到目前爲止，我固定它使用應用的填充（圖像的大小）和利潤（偏移）的元素與postion:bottom center;

Answer 1

：前：之後就可以達到的效果（使用的確切位置的子畫面圖像。）

.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