如何在速记背景属性中包含背景覆盖值？

Question

我正在尝试设置一个背景图像来拉伸到<div>的宽度和高度的全部范围。<div>的大小是可变的，所以我使用background-size: cover;

background: url("../images/bkgnd-sidebar.png") no-repeat left top cover;

我想不出如何将它放在这个速记符号中并让它工作。如果我单独列出每个属性，它会工作得很好，但我希望有一个一体化的解决方案。

这是可行的，但不是首选的：

background-size:cover;
background-image:url('../images/bkgnd-sidebar.png');

Answer 1

根据W3和MDN，需要有一个斜杠来分隔背景大小和背景位置：

W3C示例：

p { background: url("chess.png") 40% / 10em gray  round fixed border-box; } 

MDN:

此属性必须在background-position之后指定，并用'/‘字符分隔。

Opera还提供了一些背景速记信息：

http://dev.opera.com/static/dstorey/backgrounds/background-shorthand.html

Answer 2

问得好这是来自W3C http://www.w3.org/community/webed/wiki/CSS_shorthand_reference的

因此，如果要在速记语法中包含背景大小值，则需要：

• 显式包含背景位置值，即使这些值与默认值相同，也会在背景大小值之前写入背景位置值。在这两对值之间加一个斜杠。

所以你可能想做这样的事情

background: url(http://www.stanford.edu/dept/CTL/cgi-bin/academicskillscoaching/wp-content/uploads/2013/03/test-anxiety.gif) top left / cover no-repeat;

请看这里的小提琴

http://jsfiddle.net/8Up6V/

Answer 3

下面是一个使用请求者的参数的示例，它将会起作用。其他一些答案有点过于复杂的参数。所有需要做的就是用正斜杠/将background-size与background-position分隔开

 background: url("../images/bkgnd-sidebar.png") left top / cover no-repeat;