CSS背景位置50％50％不起作用

-1

有一個元素，其寬度和高度未知。我想在CSS中創建一個背景，重複這個背景，並從元素的中心開始。它應該是這樣的：CSS背景位置50％50％不起作用

我的代碼是：

body { 
    background: url('http://www.lighthouse3d.com/wp-content/uploads/2011/03/crate.jpg') 50% 50%/100% 100% repeat; 
}

https://jsfiddle.net/5omLL24d/

來源

2016-07-16 Iter Ator

如果您修改圖像以使中心部分已經位於中心，這將更容易。（不知道，如果這是選項，你沒有具體說明這個情況。） – CBroe

我將修改圖像 –

body, html { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
} 

body { 
    background: url('http://www.lighthouse3d.com/wp-content/uploads/2011/03/crate.jpg'); 
    background-repeat: repeat; 
    background-position: center center; 
}

JSFiddle

被更新（在中心的角落，WebKit的） 謝謝，CBroe和Lovelock

body, html { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
} 

body { 
    background: url('http://www.lighthouse3d.com/wp-content/uploads/2011/03/crate.jpg'); 
    background-repeat: repeat; 
    background-position: -webkit-calc(50% + 128px) -webkit-calc(50% + 128px); // 128 pixels is half of the background image 
    background-position: calc(50% + 128px) calc(50% + 128px); // 128 pixels is half of the background image 
}

JSFiddle

來源

2016-07-16 10:42:18 Daan

我認爲他們希望圖像的四個角落在中心會合...... – CBroe

@CBroe還會提到也要使用-webkit-calc。除非將其用於calc，否則始終存在Safari問題。 – Lovelock

-1

試試這個：

body, html { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
} 

body { 
    background: url('http://www.lighthouse3d.com/wp-content/uploads/2011/03/crate.jpg'); 

    background-position: center; 
}

DEMO HERE

來源

2016-07-16 10:44:28

無需添加額外的CSS屬性。您將直接使用這種方式

body { 
    background: url('http://www.lighthouse3d.com/wp-content/uploads/2011/03/crate.jpg'); 
}

來源

2016-07-16 15:03:47

如果您需要，您將添加背景重複：重複;屬性 –

CSS背景位置50％50％不起作用

回答

相關問題