Hintergrund-Cover/Center funktioniert nicht

Ich versuche, das Hintergrundbild auf das Div mit background-size: cover und background-size: contain zu zentrieren, aber es funktioniert nicht. Ich brauche, um Hintergrund-Bilder in HTML-Tags anzeigen und Hintergrund-Größe in der CSS-Datei verwenden, ist dies der Code:Hintergrund-Cover/Center funktioniert nicht

.container { 
 
    width: 200px; 
 
    height: 260px; 
 
    position: relative; 
 
    margin: 0 auto 40px; 
 
    margin-left: 20px; 
 
    display: inline-block; 
 
} 
 
.main{ 
 
    border: 1px solid black; 
 
    background-color: #A6A6A6; 
 
} 
 
.card { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    border: 2px solid white; 
 
} 
 
.card div { 
 
    height: 100%; 
 
    width: 100%; 
 
    color: white; 
 
    text-align: center; 
 
    position: absolute; 
 
} 
 
.card .front { 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    background-size: contain; 
 
    -webkit-background-size: contain; 
 
    -moz-background-size: contain; 
 
    -o-background-size: contain; 
 
}

<body style="background-image:url(https://s3.amazonaws.com/Syntaxxx/background-gold-bokeh.jpg);"> 
 
<div class="main"> 
 
    <section class="container"> 
 
     <div class="card"> 
 
      <div class="front" style="background-image: url('http://www.mobygames.com/images/covers/l/403626-injustice-2-playstation-4-front-cover.png');"> 
 
      </div> 
 
      <div class="back">1</div> 
 
     </div> 
 
    </section> 
 
    <section class="container"> 
 
     <div class="card"> 
 
      <div class="front" style="background-image: url('http://www.mobygames.com/images/covers/l/403651-the-surge-playstation-4-front-cover.jpg');"> 
 
      </div> 
 
      <div class="back">2</div> 
 
     </div> 
 
    </section> 
 
</div> 
 
      
 
</body>

Quelle

2017-11-16 SilverSurfer

auf '.card .front' hinzufügen' background-position: mitte, 'Ich hoffe, das, was Sie ist gemeint, sonst werde ich weitere Informationen benötigen :) – Gezzasa

' background-position: center center; 'Behebungen deine Probleme. – connexo

Ihre .card .front hat einen Stil von background-repeat, die Sie gegeben haben zu viele Eigenschaften.

die center center Bedürfnisse zu background-position

.card .front { 
    background-position: center center; 
    background-repeat: no-repeat; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}

Mit CSS und die meisten anderen Dimensionen, die Sie X verwenden dann gegeben werden, Y dann Z (No Z abgesehen von Z-Index)

Background-Größe wird vergrößern das Bild, bis das gesamte div voll ist.

Was Sie suchen, ist background-size: contain. Dadurch wird das gesamte Bild in einem Container angezeigt. dann die center center

.card .front { 
    background-image: url(https://s3.amazonaws.com/Syntaxxx/background-gold-bokeh.jpg); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: contain; 
    -webkit-background-size: contain; 
    -moz-background-size: contain; 
    -o-background-size: contain; 
}

Quelle

2017-11-16 08:04:02 Gezzasa

Ans was ist der Unterschied zwischen setzen 1 Zentrum und setzen 2 Zentrum in Hintergrund-Position? – SilverSurfer

Eine Mitte ist für horizontale und eine für vertikale Ausrichtung. Wenn Sie nur 1 Mitte schreiben, wird es als horizontal und vertikal hinzugefügt. – Sylwek

Aber das Bild ist immer noch ein bisschen größer als gezeigt, warum ist das? Ich muss das ganze Bild sehen, ohne zu schneiden – SilverSurfer

Ich bin nicht sicher, wenn ich Sie gut verstehen, aber haben Du hast Hintergrund-Position ausprobiert: 50%; ?

.container { 
 
    width: 200px; 
 
    height: 260px; 
 
    position: relative; 
 
    margin: 0 auto 40px; 
 
    margin-left: 20px; 
 
    display: inline-block; 
 
} 
 
.main{ 
 
    border: 1px solid black; 
 
    background-color: #A6A6A6; 
 
} 
 
.card { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
} 
 
.card div { 
 
    height: 100%; 
 
    width: 100%; 
 
    color: white; 
 
    text-align: center; 
 
    position: absolute; 
 
} 
 
.card .front { 
 
    background-repeat: no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    background-position: 50%; 
 
}

<body style="background-image:url(https://s3.amazonaws.com/Syntaxxx/background-gold-bokeh.jpg);"> 
 
<div class="main"> 
 
    <section class="container"> 
 
     <div class="card"> 
 
      <div class="front" style="background-image: url('http://www.mobygames.com/images/covers/l/403626-injustice-2-playstation-4-front-cover.png');"> 
 
      </div> 
 
      <div class="back">1</div> 
 
     </div> 
 
    </section> 
 
    <section class="container"> 
 
     <div class="card"> 
 
      <div class="front" style="background-image: url('http://www.mobygames.com/images/covers/l/403651-the-surge-playstation-4-front-cover.jpg');"> 
 
      </div> 
 
      <div class="back">2</div> 
 
     </div> 
 
    </section> 
 
</div> 
 
      
 
</body>

Quelle

2017-11-16 08:01:34 Sylwek

hinzufügen Es ist eine einfache Lösung ist, müssen Sie background-position: center; angeben. Dadurch wird sichergestellt, dass sich Ihre Hintergrundbilder selbst zentrieren.

.card .front { 
    background-position: center; 
｝

Quelle

2017-11-16 08:05:53 Vincent1989

Ans was ist der Unterschied zwischen setzen 1 Zentrum und setzen 2 Zentrum in Hintergrund-Position? – SilverSurfer

Es ist nur eine Kurzschrift 'Hintergrund-Position: x y;'. Der erste Wert ist die x-Position und der zweite Wert ist y-Position. Wenn nur der erste angegeben wird, gilt der Wert für beide X- und Y-Positionen. – Vincent1989

Aber das Bild ist immer noch ein bisschen größer als gezeigt, warum ist das? Ich brauche, um das ganze Bild zu sehen, ohne zu schneiden – SilverSurfer

Hintergrund-Cover/Center funktioniert nicht

Antwort

Verwandte Themen