Hintergrund: 50% 50%/Abdeckung; Was heißt das?

-1

.slide{ 
    background: 50% 50%/cover; 
}

Was bedeutet tun?Hintergrund: 50% 50%/Abdeckung; Was heißt das?

Ich weiß Hintergrund Syntax ist wie dieser http://www.w3schools.com/css/css_background.asp

body { 
    background: #ffffff url("img_tree.png") no-repeat right top; 
}

Aber warum gibt es in meinem Code 50% 50%/cover ist?

Quelle

2016-08-02 Samuel Rocky

A.background-position:50% 50%

die background-position hat diese Werte position(left/right/center top/center/bottom) |x% y%|xpos ypos|initial|inherit;

background-position:50% 50% bedeutet

Der erste Wert der horizontalen Position ist, und der zweite Wert ist die Vertikale. Die obere linke Ecke ist 0% 0%. Die rechte untere Ecke ist 100% 100%. Wenn Sie nur einen Wert angeben, beträgt der andere Wert 50%. . Der Standardwert ist: 0% 0%

hier mehr lesen background-position

B.background-size:cover

background-size:cover dies tut:

Skalieren Sie das Hintergrundbild so groß wie möglich, sodass der Hintergrundbereich vollständig vom Hintergrundbild abgedeckt wird. Einige Teile des Hintergrundbildes möglicherweise nicht in Sicht im Hintergrund Positionierbereich

hier sehen background-size

so im Code:

body { 
background: #ffffff url("img_tree.png") no-repeat right top; 
}

right top ist die background-position so 50% 50% wird an ihrer Stelle sein. auch Sie haben kein background-size Satz, so dass es Wert ist, ist auto

, wenn Sie die beiden Codes schreiben wie diese

body { 
background: url("img_tree.png") no-repeat 50% 50%/cover #ffffff ; 
}

die in

übersetzt kombinieren möchten

body { 
background-image: url("img_tree.png"); 
background-repeat: no-repeat; 
background-position: 50% 50%; 
background-size: cover; 
background-color:#fff; 
}

Quelle

2016-08-02 07:45:15