有沒有辦法相對於元素的中心定位背景圖片？

Question

我有一個我希望應用背景的元素，但我希望基於其正確的座標定位背景圖像。

我可以使用容器div來表示背景，儘管在這種情況下它不是很實用。

我目前有以下規則：

.myelem { 
    background-image: url("myelem.png"); 
    background-position: 5% 60%; 
    background-repeat: no-repeat; 
} 

其中大部分作品，因爲圖像的大小。如果可能的話，我想指定背景的相對位置是middle而不是left。

Answer 1

CSS的propoerty background-position接受center作爲值：

.myelem { 
    background-image: url("myelem.png"); 
    background-position: center center; 
    background-repeat: no-repeat; 
} 

或者簡寫版本：

.myelem { 
    background: url("myelem.png") center center no-repeat; 
} 

更新1

有沒有簡單的CSS方法來設置背景位置設置爲中心（或底部或右側）的偏移量。

您可以添加填充到實際的圖像，使用JavaScript來計算頁面加載後的位置，增加保證金的元素的建議在以下做題：

• HTML background image offset by x pixels from the center
• Offset a background image from the right using CSS

或者，您可以使用calc來計算正確的位置。雖然calc is not supported在這一點上由所有瀏覽器。

使用鈣，你可以做這樣的事情：

.myelem { 
    background-image: url("myelem.png"); 
    background-position: 5% 60%; 
    background-position: -webkit-calc(50% - 200px) 60%; 
    background-position: calc(50% - 200px) 60%; 
    background-repeat: no-repeat; 
} 

Demo