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

syntax of (multiple) background shorthand是：

背景：[＆lt; bg-layer＆gt; ，] *＆lt; final-bg-layer＆gt;

哪里

＆LT; BG-层＆gt; =＆lt; bg-image＆gt; || ＆LT;位置＆GT; [/   ＆LT; BG-大小＆GT; ]？ || ＆LT;重复式＆GT; || ＆LT;附件＆GT; ||   ＆LT;盒＆GT; || ＆LT;盒＆GT;

＆LT;终-BG-层＆gt; =＆lt; bg-image＆gt; || ＆LT;位置＆GT; [/   ＆LT; BG-大小＆GT; ]？ || ＆LT;重复式＆GT; || ＆LT;附件＆GT; ||   ＆LT;盒＆GT; || ＆LT;盒＆GT; || ＆LT;＆＃39;背景色＆＃39;＆GT;

...如果一个＆lt; box＆gt;值存在然后它设置两者   'background-origin'和'background-clip'到该值。如果有两个值   存在，然后第一个设置'背景原点'和第二个   “背景剪辑”。


双栏（||）分隔两个或多个选项：必须以任何顺序出现其中一个或多个选项。

星号（*）表示前面的类型，单词或组出现零次或多次。

问号（？）表示前面的类型，单词或组是可选的。

因此，为了包含background-size，必须在其之前指定background-position并在其间放置/。

假设你想从中心而不是左上角裁剪图像，你会写：

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

以下所有四个示例都使用相同的图像：

＆＃13;

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;
}

＆＃13;

<h1>background-position: left top<h1>
<div class="test test-landscape test-lefttop"></div>
<div class="test test-portrait  test-lefttop"></div>

<h1>background-position: center</h1>
<div class="test test-landscape test-center"></div>
<div class="test test-portrait  test-center"></div>

＆＃13;

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

4 个答案: