背景大小的简略背景属性(CSS3) [英] background-size in shorthand background property (CSS3)
问题描述
我试图将 W3C示例: background-image
和 background-size
c> background 属性。根据 W3C文档 background- size 应该在以斜杠(
/
)分隔的 background-position
/ p>
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
和背景时制作速记
有两个不同的值背景
属性-position background-position-x
和 background-position-y
或 background-size
的同一事物。不清楚斜线( /
)是如何发生的? 此示例在我的Chrome 15中无法使用。
示例我尝试make a shorthand is this CSS code:
div {
background:url(http://www.placedog。 com / 125/125)
0 0 / 150px 100px
重复no-repeat
固定边框框填充框蓝色;
height:300px;
width:360px;
border:10px dotted magenta;
}
一个更干净的例子
这是正常工作( JSFiddle )
body {
background-image:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png);
background-position:200px 100px;
background-size:600px 400px;
background-repeat:no-repeat;
}
这不起作用( jsfiddle )
body {
background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png)200px 100px / 600px 400px no-repeat;
}
这不起作用 =http://jsfiddle.net/ZNsbU/8/> jsfiddle )
body {
background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png)200px / 400px 100px / 600px不重复;
}
- 您的jsfiddle使用
background-image
代替背景
- 是此浏览器不支持的情况。
在歌剧中工作: http://jsfiddle.net/ZNsbU/5/
但是不能在ff5和ie8中工作。 (yay for outdatted browser:D)
代码:
body {
background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png)400px 200px / 600px 400px no-repeat;
}
您可以这样做:
body {
background:url(http://www.google.com/intl/zh-CN/images/srpr/ logo3w.png)400px 400px no-repeat;
background-size:20px 20px
}
哪些工作在ff5,opera但不是ie8。
I'm trying to mix background-image
and background-size
properties in a shorthanded background
property. Based on W3C documentation background-size
should come after background-position
property separated with an slash(/
).
W3C example:
p { background: url("chess.png") 40% / 10em gray round fixed border-box; }
is equivalent to:
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 says same thing. I also found this and this article about shorthand CSS3 background property explaining this.
But this is not working! It also is not clear how to make a shorthand background
property when background-size
and background-position
have two different values for background-position-x
and background-position-y
or same thing for background-size
. It's not clear how the slash(/
) takes place? This example is not working in my Chrome 15.
Example I tried to make a shorthand is this CSS code:
div {
background: url(http://www.placedog.com/125/125)
0 0 / 150px 100px
repeat no-repeat
fixed border-box padding-box blue;
height: 300px;
width:360px;
border: 10px dashed magenta;
}
A cleaner example
This is working (JSFiddle)
body{
background-image:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png);
background-position:200px 100px;
background-size:600px 400px;
background-repeat:no-repeat;
}
This is not working (jsfiddle)
body{
background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px 100px/600px 400px no-repeat;
}
This is not working too(jsfiddle)
body{
background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px/400px 100px/600px no-repeat;
}
- Your jsfiddle use
background-image
instead ofbackground
- It seems to be a case of "not supported by this browser yet" case.
This work in opera : http://jsfiddle.net/ZNsbU/5/
But doesnt work in ff5 nor ie8. (yay for outdatted browser :D )
Code :
body {
background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 200px / 600px 400px no-repeat;
}
You could do it like this :
body {
background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 400px no-repeat;
background-size:20px 20px
}
Which work in ff5, opera but not ie8.
这篇关于背景大小的简略背景属性(CSS3)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!