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％不起作用

回答

相关问题