如何在简写背景属性中包含background-cover值？
我试图设置一个背景图像来扩展到一个<div>的宽度和高度。 <div>将是可变大小的，所以我使用background-size: cover;
background: url("..http://img.dovov.combkgnd-sidebar.png") no-repeat left top cover;
我不知道如何把它放在这个简写符号中，并使其工作。 如果我单独列出每个属性，它的工作正常，但我希望有一个一体化的解决scheme。
这工作，但不是首选：
background-size:cover; background-image:url('..http://img.dovov.combkgnd-sidebar.png');
根据W3和MDN的说法，需要将背景大小与背景位置分开：
W3C例子：
p { background: url("chess.png") 40% / 10em gray round fixed border-box; }
MDN：
这个属性必须在background-position之后指定，用“/”字符分隔。
歌剧也有一些背景简写的信息：
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;
在这里看小提琴
这是一个使用提问者参数的例子。 一些其他的答案有一些过于复杂的参数。 所有需要做的是background-size需要与background-position分开正斜杠/ ：
background: url("..http://img.dovov.combkgnd-sidebar.png") left top / cover no-repeat;
（多个）背景缩写的语法是：
背景：[<bg-layer>，] * <final-bg-layer>
哪里
<bg-layer> = <bg-image> || <position> [/ <bg-size>]？ || <repeat-style> || <attachment> || <box> || <箱>
<final-bg-layer> = <bg-image> || <position> [/ <bg-size>]？ || <repeat-style> || <attachment> || <box> || <box> || <“背景颜色”>
…如果存在一个<box>值，那么它将'background-origin'和'background-clip'设置为该值。 如果存在两个值，则第一个设置“background-origin”和第二个“background-clip”。
- 双条（||）分隔两个或多个选项：其中一个或多个选项必须以任意顺序出现。
- 星号（*）表示前面的types，单词或组发生零次或多次。
- 问号（？）表示前面的types，单词或组是可选的。
所以为了包含background-size ，你必须在它之前指定background-position并放置一个/中间。
假设你想从中心裁剪图像而不是左上angular，你会写：
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>
