Ich versuche , zu mischen background-imageund background-sizein einer Shorthanded Eigenschaft backgroundEigenschaft. Basierend auf W3C background-size sollte die Dokumentation nach background-positioneiner durch einen Schrägstrich ( /) getrennten Eigenschaft erfolgen .

W3C-Beispiel:

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

ist äquivalent zu:

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 sagt dasselbe. Ich fand auch diesen und diesen Artikel über die CSS3-Hintergrundeigenschaft, der dies erklärt.

Das funktioniert aber nicht! Es ist auch nicht klar , wie eine Kurz machen backgroundEigenschaft , wenn background-sizeund background-positionhaben zwei unterschiedliche Werte für background-position-xund background-position-yoder gleiche für background-size. Es ist nicht klar, wie der Schrägstrich ( /) stattfindet? Dieses Beispiel funktioniert in meinem Chrome 15 nicht.

Beispiel Ich habe versucht, eine Abkürzung zu erstellen, ist dieser 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;  
}

Ein saubereres Beispiel

Das funktioniert ( 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;
    }

Dies funktioniert nicht ( jsfiddle )

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

Dies funktioniert auch nicht ( jsfiddle )

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

1. Ihre jsfiddle verwendet background-imageanstelle vonbackground
2. Es scheint ein Fall von "noch nicht von diesem Browser unterstützt" zu sein.

Dies funktioniert in Opera: http://jsfiddle.net/ZNsbU/5/
Aber es funktioniert weder in FF5 noch in IE8. (yay für veraltete Browser: D)

Code:

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

Sie könnten es so machen:

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

Was in FF5 und Opera funktioniert, aber nicht in IE8.

Sie können als tun

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

Nur ein Hinweis als Referenz: Ich habe versucht, Kurzschrift wie folgt zu machen:

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

Aber iPhone Safari-Browser zeigten das Bild mit einem festen Positionselement nicht richtig an. Ich habe nicht mit einem nicht reparierten überprüft, weil ich faul bin. Ich musste das CSS auf das Folgende umstellen und darauf achten, dass die Hintergrundgröße nach der Hintergrundeigenschaft steht. Wenn Sie dies in umgekehrter Reihenfolge tun, setzt der Hintergrund die Hintergrundgröße auf die Originalgröße des Bildes zurück. Daher würde ich generell vermeiden, die Kurzform zum Einstellen der Hintergrundgröße zu verwenden.

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

probieren Sie es so aus

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


/* 100px is the background size */

Sie müssen Herstellerpräfixe verwenden, um verschiedene Browser zu unterstützen, und können diese daher nicht in Kurzform verwenden.

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