Question

可能重复：
background-size in shorthand background property (CSS3)

<!DOCTYPE html>
<meta charset="utf-8">
<title>An HTML5 Document</title>
<style>
    div {
        width: 500px;
        height: 400px;
        background: red url(https://www.google.com/images/logos/google_logo_41.png) 50% 50% cover no-repeat;
    }
</style>
<div></div>

http://jsfiddle.net/gu9fh

我想定义一个值为background-size的CSS cover属性。但我不倾向于写一个background-size属性。我想把它与background属性结合起来。但背景不会显示。

如何将background-size值cover添加到background属性的值？

感谢。

Answer 1

还有一点没有注意到，并非所有浏览器（包括Chrome）都支持新的CSS3背景速记。

为了获得更好的支持，您可能应该单独使用background-size属性，因为大多数新浏览器都支持这种方式。

div {
    width: 500px;
    height: 400px;
    background: red url(https://www.google.com/images/logos/google_logo_41.png) no-repeat scroll 50% 50%;
    background-size: cover;
}

上面的代码在FireFox和Chrome中均有效，而速记则没有。

有关演示和正确的属性排序，请参阅以下链接。

请参阅Dev - Opera - Background Shorthand

Answer 2

使用速记属性时，background-size值必须与background-position配对，并以/

分隔

更新：http://jsfiddle.net/5jJfQ/

请参阅此处的文档：http://www.w3.org/TR/2002/WD-css3-background-20020802/#properties7

Answer 3

background的参数顺序已关闭。重复应该在位置之前。然后正如jrrdnx所说， size 和 position 应该用/

分开

background: red url(https://www.google.com/images/logos/google_logo_41.png) no-repeat 50% 50%/cover;

请参阅：http://jsfiddle.net/gu9fh/5/

一个很好的参考：http://reference.sitepoint.com/css/background

编辑：正如PJH所说，Firefox或Safari尚不支持位置/大小的简写。您只需要在其上设置background-size。

background: red url(https://www.google.com/images/logos/google_logo_41.png) no-repeat 50% 50%;
background-size: cover;

并更新了小提琴：http://jsfiddle.net/gu9fh/6/

我无法将CSS“background-size”值添加到“background”属性的值

3 个答案: