fond-taille dans la propriété background de sténographie (CSS3)

Question

Je suis en train de mélanger background-image et background-size propriétés dans un shorthanded background de la propriété. Basé sur la documentation du W3C background-size doit venir après, background-position propriété séparés par une barre oblique(/).

W3C exemple:

p { background: url("chess.png") 40% / 10em gray
       round fixed border-box; } 

est équivalent à:

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 dit la même chose. J'ai aussi trouvé cet et cet article sur la sténographie CSS3 propriété background expliquant cela.

Mais ce n'est pas de travail! Il n'est pas aussi clair comment faire un raccourci background de la propriété lors de l' background-size et background-position ont deux valeurs différentes pour background-position-x et background-position-y ou même chose pour background-size. Il n'est pas clair comment la barre oblique(/) a lieu? Cet exemple n'est pas de travail dans mon Chrome 15.

Exemple, j'ai essayé de faire une abréviation est ce code 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;  
}

Un nettoyant exemple

C'est de travail (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;
    }

Ce n'est pas de travail (jsfiddle)

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

Ce n'est pas de travail trop(jsfiddle)

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

Answer 1

<ol> <li>Votre utilisation de jsfiddle <code></code> au lieu de<code></code></li> <li>Il semble être un cas de « non supporté par ce navigateur encore » affaire.</li> <p>Ce travail à l’opéra : <a href="http://jsfiddle.net/ZNsbU/5/">http://jsfiddle.net/ZNsbU/5/</a><br>Mais ne fonctionne pas dans ff5 ni ie8. (yay pour navigateur outdatted : D)</p><h2>Code :</h2><pre><code></code></pre><p>Vous pourriez le faire comme ceci :</p><pre><code></code></pre><p>Qui travaillent dans ff5, opéra mais pas ie8.</p></ol>

Answer 2

Vous pouvez faire en tant que

Answer 3

Juste une note pour référence: j'ai essayé de faire abrégée comme suit:

background: url('../images/sprite.png') -312px -234px / 355px auto no-repeat;

mais iPhone les navigateurs Safari n'affiche pas correctement l'image avec une position fixe de l'élément. Je n'ai pas vérifier avec un non-fixe, parce que je suis paresseux. J'ai dû changer le css de ce qui est ci-dessous, en prenant soin de mettre de fond de taille après le fond de la propriété. Si vous les faites à l'inverse, l'arrière-plan reprend le fond de taille à la taille originale de l'image. Donc en général, je voudrais éviter d'utiliser le raccourci pour définir l'arrière-plan de la taille.

background: url('../images/sprite.png') -312px -234px no-repeat;
background-size: 355px auto;

Answer 4

essayer comme ceci

Answer 5

Vous aurez à utiliser les préfixes du vendeur pour soutenir les différents navigateurs et par conséquent ne peut pas l’utiliser en sténographie.