fond de taille en sténographie, propriété de l'arrière plan (CSS3)

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 documentation du W3C background-size devrait venir après background-position bien 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) }

SOCIÉTÉ dit la même chose. J'ai aussi trouvé cette et cette 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 bien quand background-size et background-position avoir 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(/) prend place? 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

Ce travail est (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 trop(jsfiddle)

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

Méfiez-vous de Safari pas l'appui de fond de taille sténo! Safari ne le supporte pas! Mettez votre fond de taille distincte de votre fond de garder Safari de l'étouffement sur elle!

InformationsquelleAutor Mohsen | 2011-10-23

css css3

61
1. Votre jsfiddle utilise background-image au lieu de background
2. Il semble être un cas de "non pris en charge par ce navigateur encore".
Cela fonctionne à l'Opéra : http://jsfiddle.net/ZNsbU/5/

Mais il ne fonctionne pas dans FF5, ni IE8. (yay pour les navigateurs obsolètes 😀 )

Code :
```
body {
  background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 200px / 600px 400px no-repeat;
}
```
Vous pourriez le faire comme ceci :
```
body {
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 400px no-repeat;
    background-size:20px 20px
}
```
Qui travaille dans FF5 et à l'Opéra, mais pas avec IE8.
- Pensez-vous qu'il n'est pas un navigateur de problème de prise en charge?
- Je suis juste demandé ce qui est le droit de la spécification CSS3 background?
- C'est ce que le W3C a défini, exactement comme vous avez dans votre question ou mon exemple de Code. Il n'est tout simplement pas mis en œuvre dans tous les navigateurs encore.
- Il ne fonctionne pas dans google Chrome Canary. Je ne peux pas croire que ce n'est pas encore mis en œuvre.
- Sélectionné en tant que réponse pour cette partie: Il semble être un cas de "non pris en charge par ce navigateur encore" le cas.
- Android intégré dans le navigateur aussi n'est toujours pas de fond de soutien de taille en sténographie à fond!
InformationsquelleAutor Kraz

Vous pouvez faire en tant que

 body{
        background:url('equote.png'),url('equote.png');
        background-size:400px 100px,50px 50px;
    }

InformationsquelleAutor vignesh

9

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 la propriété background. 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;
```
- Même ici sur Android 4.1.2 Stock Navigateur
InformationsquelleAutor Daniel

essayer comme ceci

body {
   background: #fff url("!--MIZO-PRO--!") no-repeat center 15px top 15px/100px;
     }


/* 100px is the background size */

InformationsquelleAutor MizoPro

-5

Vous aurez à utiliser des fournisseurs de préfixes pour soutenir les différents navigateurs et ne peut donc pas l'utiliser en sténographie.
```
body { 
        background: url(images/bg.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}
```
- Ce n'est pas correct. Je n'ai pas à utiliser des fournisseurs de préfixe si je ne veux pas de support des vieux navigateurs
- Ce vendeur préfixes encore travailler et certains navigateurs n'ont que récemment abandonné.
InformationsquelleAutor Moin Zaman

Vous devez vous connecter pour publier un commentaire.

Un nettoyant exemple

Code :