CSS 如何在速记背景属性中包含背景覆盖值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17093252/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to include the background-cover value in the shorthand background property?
提问by techtheatre
I am trying to set a background-image to stretch to the full extent of a <div>'s width and height. The <div>will be of variable size, so I am using background-size: cover;
我正在尝试将背景图像设置为拉伸到 a<div>的宽度和高度的全部范围。该<div>会是可变大小的，所以我用background-size: cover;
background: url("../images/bkgnd-sidebar.png") no-repeat left top cover;
I cannot figure out how to place it in this shorthand notation and have it work. If I list each property independently, it works fine, but I was hoping for an all-in-one solution.
我不知道如何把它放在这个速记符号中并让它工作。如果我单独列出每个属性，它工作正常，但我希望有一个多合一的解决方案。
This works, but is not preferred:
这有效，但不是首选：
background-size:cover;
background-image:url('../images/bkgnd-sidebar.png');
采纳答案by j08691
According to the W3and MDN, there needs to be a slash separating the backgound-size from the background-position:
W3C example:
W3C 示例：
p { background: url("chess.png") 40% / 10em gray round fixed border-box; }
MDN:
MDN：
This property must be specified after background-position, separated with the '/' character.
此属性必须在 background-position 之后指定，以“/”字符分隔。
Opera also has some information on the background shorthand:
Opera 也有一些关于后台速记的信息：
http://dev.opera.com/static/dstorey/backgrounds/background-shorthand.html
http://dev.opera.com/static/dstorey/backgrounds/background-shorthand.html
回答by Dominic Green
Good question this is from W3C http://www.w3.org/community/webed/wiki/CSS_shorthand_reference
好问题，这是来自 W3C http://www.w3.org/community/webed/wiki/CSS_shorthand_reference
So if you want to include the background-size value in the shorthand syntax, you need to:
因此，如果您想在速记语法中包含 background-size 值，您需要：
- Explicitly include background-position values even if these are the same as the defaults Write background-position values before background-size values. Put a slash in between these two pairs of values.
- 明确包含背景位置值，即使这些值与默认值相同 在背景大小值之前写入背景位置值。在这两对值之间加一个斜线。
So you would want to do something like this
所以你会想做这样的事情
background: url(http://www.stanford.edu/dept/CTL/cgi-bin/academicskillscoaching/wp-content/uploads/2013/03/test-anxiety.gif) top left / cover no-repeat;
See fiddle here
在这里看到小提琴
回答by Marc
Here is an example using the asker's parameters that will work. Some of the other answers have overcomplicated the parameters a bit. All that needs done is the background-sizeneeds to be separated from the background-positionby a forward slash /:
这是一个使用提问者参数的例子。其他一些答案使参数有点过于复杂。所有需要做的就是用正斜杠将background-size需求与 分开：background-position/
background: url("../images/bkgnd-sidebar.png") left top / cover no-repeat;
回答by Salman A
The syntax of (multiple) background shorthandis:
background: [ <bg-layer> , ]* <final-bg-layer>
Where
<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>
... If one <box> value is present then it sets both ‘background-origin' and ‘background-clip' to that value. If two values are present, then the first sets ‘background-origin' and the second ‘background-clip'.
- A double bar (||) separates two or more options: one or more of them must occur, in any order.
- An asterisk (*) indicates that the preceding type, word, or group occurs zero or more times.
- A question mark (?) indicates that the preceding type, word, or group is optional.
背景：[ <bg-layer> , ]* <final-bg-layer>
在哪里
<bg-layer> = <bg-image> || <位置> [ / <bg-size> ]？|| <重复样式> || <附件> || <框> || <盒子>
<final-bg-layer> = <bg-image> || <位置> [ / <bg-size> ]？|| <重复样式> || <附件> || <框> || <框> || <'背景色'>
... 如果存在一个 <box> 值，则它将 'background-origin' 和 'background-clip' 都设置为该值。如果存在两个值，则第一个设置 'background-origin' 和第二个 'background-clip'。
- 双杠 (||) 分隔两个或多个选项：其中一个或多个选项必须以任何顺序出现。
- 星号 (*) 表示前面的类型、词或组出现零次或多次。
- 问号 (?) 表示前面的类型、单词或组是可选的。
So the in order to include background-size, you mustspecify the background-positionbefore it and place a /in-between.
所以为了包含background-size，你必须background-position在它之前指定，并/在中间放置一个。
Assuming that you want to crop the image from the center instead of top-left you would write:
假设你想从中心而不是左上角裁剪图像，你会写：
background: url(...) center / cover;
All four examples below use the same image:
以下所有四个示例都使用相同的图像：
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>