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

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-size值,则需要:

• 显式包含背景位置值,即使它们与背景大小值之前的默认值写背景位置值相同.在这两对值之间加上斜线.

所以你想要做这样的事情

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;

Answer 4

（多个）背景速记的语法为：

背景：[<bg-layer>，] * <最终-bg-layer>

哪里

<bg-layer> = <bg-image> || <position> [/ <bg-size>]？|| <重复样式> || <附件> || <box> || <盒子>

<final-bg-layer> = <bg-image> || <position> [/ <bg-size>]？|| <重复样式> || <附件> || <box> || <box> || <'背景色'>

...如果存在一个<box>值，则它将“ background-origin”和“ background-clip”都设置为该值。如果存在两个值，则第一个设置“ background-origin”，第二个设置“ background-clip”。

• 双杠（||）分隔两个或多个选项：必须以任何顺序出现一个或多个选项。
• 星号（*）表示前面的类型，单词或组出现0次或多次。
• 问号（？）表示前面的类型，单词或组是可选的。

因此，要包含background-size，您必须background-position在其之前指定并/在两者之间放置一个。

假设您要从中间而不是从左上方裁剪图像，您将这样写：

background: url(...) center / cover;

以下所有四个示例都使用同一张图片：

background: url(...) center / cover;

h1 {
  font: medium monospace;
}
.test {
  display: inline-block;
}
.test-landscape {
  width: 200px;
  height: 150px;
}
.test-portrait {
  width: 150px;
  height: 200px;
}
.test-lefttop {
  background: url(http://dummyimage.com/400x400/CCC/000000&text=%C3%97) left top / cover;
}
.test-center {
  background: url(http://dummyimage.com/400x400/CCC/000000&text=%C3%97) center / cover;
}