css3 background简写,background-size简写背景属性(CSS3)

background-size简写背景属性(CSS3)

我正在尝试在短手background属性中混合background-image和background-size属性。 基于W3C文档 background-size应该在用斜线( / )分隔的background-position属性之后。

W3C例子:

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

相当于:

p { background-color: gray; background-position: 40% 50%; background-size: 10em 10em; background-repeat: round round; background-clip: border-box; background-origin: border-box; background-attachment: fixed; background-image: url(chess.png) }

MDN说同样的事情。 我也发现这个和这篇文章关于速记CSS3背景属性解释这一点。

但是这不行! 当background-size和background-position对background-position-x和background-position-y有两个不同的值,或者对于background-size同样的东西时,如何做一个简写background属性也是不清楚的。 不清楚斜线( / )是如何发生的? 此示例在我的Chrome 15中不起作用。

例子我试图做一个简写是这个CSS代码:

div { background: url(http://www.placedog.com/125/125) 0 0 / 150px 100px repeat no-repeat fixed bor

你可能感兴趣的:(css3,background简写)