背景大小的简略背景属性（CSS3） [英] background-size in shorthand background property (CSS3)

问题描述

我试图将 background-image 和 background-size c> background 属性。根据 W3C文档 background- size 应该在以斜杠（ / ）分隔的 background-position / p>



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 和背景时制作速记背景属性-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不重复; 
} 
  

解决方案

1. 您的jsfiddle使用 background-image 代替背景


2. 是此浏览器不支持的情况。

在歌剧中工作： 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;
}

解决方案

1. Your jsfiddle use background-image instead of background
2. 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屋！