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

我试图设置一个背景图像拉伸到一个 <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');
35052 次浏览
小开
最佳答案

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

W3C 的例子:

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

麦当劳记者:

此属性必须在分隔的背景位置之后指定 使用’/’字符。

Opera 还提供了一些关于背景速记的信息:

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

小开

好问题，这是来自 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/

小开

(多)背景速记的语法是:

背景: [ < bg- 图层 > ，] * < final-bg- 图层 >

在哪里

< bg- 图层 > = < bg- 图像 > | | < 位置 > [/ 重复样式 > | | < 附件 > | | < box > | | < box >

< final-bg-Layer > = < bg-image > | | < position > [/ 重复样式 > | | < 附件 > | | < box > | | < box > | | < “背景色”>

... 如果存在一个 < 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>

小开

下面是一个使用询问者参数的示例。其他一些答案的参数有点过于复杂了。所有需要做的就是用一个斜杠 /把 background-size和 background-position分开:

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

提交答案