70

我正在尝试设置背景图像以拉伸到 a<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');
4

4 回答 4

66

根据W3和MDN，需要有一个斜线将背景大小与背景位置分开：

W3C 示例：

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

医疗器械网络：

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

Opera 也有一些关于背景速记的信息：

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

于 2013-06-13T17:26:15.013 回答
33

这是来自 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/

于 2013-06-13T17:37:14.353 回答
23

这是一个使用提问者参数的示例。其他一些答案使参数有点过于复杂。所有需要做的就是需要通过正斜杠background-size与 分开：background-position/

 background: url("../images/bkgnd-sidebar.png") left top / cover no-repeat;
于 2016-05-18T18:45:58.650 回答
5

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

背景：[ <bg-layer> , ]* <final-bg-layer>

在哪里

<bg-layer> = <bg-image> || <位置> [ / <bg-size> ]？|| <重复样式> || <附件> || <框> || <框>

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

...如果存在一个 <box> 值，则它将“背景原点”和“背景剪辑”都设置为该值。如果存在两个值，则第一个设置“背景原点”，第二个设置“背景剪辑”。

  • 双杠 (||) 分隔两个或多个选项：它们中的一个或多个必须以任意顺序出现。
  • 星号 (*) 表示前面的类型、单词或组出现零次或多次。
  • 问号 (?) 表示前面的类型、单词或组是可选的。

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

假设您想从中心而不是左上角裁剪图像，您将编写：

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

于 2015-02-21T11:09:55.870 回答