我正在尝试在一个人手不足的background
属性中混合使用background-image
和background-size
属性。基于,background-size
应该出现在background-position
属性之后,用斜杠分隔(/
)。
W3C示例:
p{背景: url("chess.png") 40% / 10em灰色圆形固定边框;}
等同于:
P{背景颜色:灰色;背景位置:40%50%;背景大小: 10em 10em;背景重复:圆形;背景剪辑:边框;背景原点:边框;背景附件:固定;背景图片: url(chess.png) }
也是这么说的。我还找到了关于速记CSS3背景属性的this和this文章,解释了这一点。
但这不管用!当background-size
和background-position
对于background-position-x
和background-position-y
有两个不同的值,或者对于background-size
有相同的值时,如何创建速记background
属性也不清楚。目前还不清楚斜杠(/
)是如何发生的?This example在我的Chrome15中不起作用。
我试着做一个速记的例子是这个CSS代码:
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;
}
一个更简洁的例子
这是有效的(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;
}
这也不起作用(jsfiddle)
body{
background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px/400px 100px/600px no-repeat;
}
发布于 2011-10-23 13:45:40
background-image
而不是jsfiddle,这似乎是一个“还不被这个浏览器支持”的情况。这在歌剧中有效:http://jsfiddle.net/ZNsbU/5/
但它在FF5和IE8中都不起作用。(对过时的浏览器是的: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/en_com/images/srpr/logo3w.png) 400px 400px no-repeat;
background-size:20px 20px
}
它可以在FF5和Opera中工作,但不能在IE8中工作。
发布于 2013-09-12 03:15:42
您可以这样做
body{
background:url('equote.png'),url('equote.png');
background-size:400px 100px,50px 50px;
}
发布于 2013-08-29 22:59:45
仅供参考:我正在尝试速记,如下所示:
background: url('../images/sprite.png') -312px -234px / 355px auto no-repeat;
但是iPhone Safari浏览器不能正确显示带有固定位置元素的图像。我没有检查一个非固定的,因为我很懒。我不得不将背景切换为下面的样式,小心地将背景大小的背景放在背景属性之后。如果反转,背景会将背景大小恢复为图像的原始大小。因此,通常我会避免使用速记来设置背景大小。
background: url('../images/sprite.png') -312px -234px no-repeat;
background-size: 355px auto;
https://stackoverflow.com/questions/7864448
复制相似问题