3

可能重复：
速记背景属性 (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用 value 定义一个 CSS 属性cover。但我不倾向于写一个单一的background-size属性。我想把它和background财产结合起来。但不显示背景。

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

谢谢。

4

3 回答 3

6

还没有注意到的是，并非所有浏览器（包括 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 - 背景速记

于 2012-08-20T17:23:56.400 回答
5

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

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

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

于 2012-08-20T17:13:40.127 回答
3

参数的顺序为background关闭。repeat应该在position之前。然后正如 jrrdnx 指出的那样，大小和位置应由/

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/

于 2012-08-20T17:14:07.660 回答