Question

目前在Chrome中，背景样式规范：

background: color position/size repeat origin clip attachment image|initial|inherit;

但是我无法让position/size片段起作用;

我应该可以说red top left 100% 100% no-repeat url()或red top left contain url()甚至red contain url() - 但这些都不会产生结果。

当然，我可以通过指定各个background-*属性来实现。规格是破碎还是Chrome？ O_O

Answer 1

CSS background属性语法是这样的：

background: [  <background-color>    ||  <background-image>       ||
               <background-repeat>   ||  <background-attachment>  ||
               <background-position>
            ]   |   inherit ;

示例：

background: red url("../images/image.jpg") no-repeat scroll top left;

至于background-size属性，它来自CSS3。你应该单独使用它。

Answer 2

答案在你的问题中。您错过了/和position之间的size：

background: #FFF url("/image/path/img.jpg) no-repeat scroll top left / 100% 100%;
                                                                     ^

示例：

html, body {
    height: 100%;
    min-height: 100%;
}

body {
    background: #FFF url(http://placehold.it/400x400) no-repeat scroll top left / 100% 100%;
}

CSS3背景 - 不完整的规范？

2 个答案: