一尘不染

速记背景属性(CSS3)中的background-size

css

我正在尝试在属性不足的属性中混合使用background-imagebackground-size属性background。基于W3C的文档
background-sizebackground-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) }

但这是行不通的!还不清楚如何backgroundbackground-size和分别background-position具有background-position-xbackground-position-y或具有相同的值时使用简写属性background-size。尚不清楚slash(/)是如何发生的?在我的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;  
}

一个更清洁的例子

 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;
    }

这不起作用

body{
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px 100px/600px 400px no-repeat;
}

这也行不通

body{
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px/400px 100px/600px no-repeat;
}

阅读 428

收藏
2020-05-16

共1个答案

一尘不染

  1. 您的jsfiddle使用background-image代替background
  2. 似乎是“此浏览器尚不支持”的情况。

但在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中不起作用。

2020-05-16