Hintergrundbilder ist nicht richtig ausgerichtet

Also was ich versuche zu tun ist zunächst ein Container ein Hintergrundbild und dann erstellen zwei Div-Tag mit Col-md-6 Bootstrap. Hintergrundbild von main div ist nur Gras Textur. In den zwei div Tag gebe ich ein Hintergrundbild des Skeletts des Fußballplatzes. Also nehme ich die eine Hälfte, gebe sie einem div und mache dann das gleiche Bild um 180. Aber es kommt nicht wie erwartet. Ich weiß nicht, was hier schief läuft.Hintergrundbilder ist nicht richtig ausgerichtet

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<title></title> 
<style type="text/css"> 

.height{ 
width: 100%; 
min-height: 100vh; 
background-image: url(./turf2.jpg); 
} 
.left{ 
background-image: url(./court.png); 
background-size: 100% 100%; 
height: 768px; 
} 
.right{ 
background-image: url(./court.png); 
background-size: 100% 100%; 
height: 768px; 
transform: rotate(180deg); 
} 


</style> 


</head> 
<body> 

<div class="row height"> 

<div class="col-md-6 left"> 

</div> 
<div class="col-md-6 right"> 

</div> 
</div> 
</body> 
</html>

Quelle

2016-08-12 scripter

Verwenden Sie die Konsole des Browsers und überprüfen Sie die korrekte Höhe, indem Sie es von dort anpassen. –

könnten Sie die Bilder hosten, damit wir durch die Geige schauen können? –

Hintergrund-Position: Mitte; – Nath

können Sie als schreiben

.right { 
    background-image: url(./court.png); 
    background-size: 100% 100%; 
    height: 768px; 
    -webkit-transform:scaleX(-1); 
    -moz-transform:scaleX(-1); 
    -ms-transform:scaleX(-1); 
    -o-transform:scaleX(-1); 
    transform:scaleX(-1); 
    filter: FlipH; 
    -ms-filter: "FlipH"; 
}

Quelle

2016-08-12 05:05:39

wieder Ihre Bildabmessungen Überprüfen Sie, ob sie übereinstimmen. Sehen Sie hier, dass ich zwei Bilder mit den gleichen Maßen verwendet habe und sie perfekt ausgerichtet sind.

.height { 
 
    width: 100%; 
 
    min-height: 100vh; 
 
    background-image: url(./turf2.jpg); 
 
} 
 
.left { 
 
    height: 200px; 
 
    background-image: url('http://placehold.it/200x200'); 
 
    background-size: 100% 100%; 
 
} 
 
.right { 
 
    height: 200px; 
 
    background-image: url('http://placehold.it/200x200'); 
 
    background-size: 100% 100%; 
 
    transform: rotate(180deg); 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 

 
</head> 
 

 
<body> 
 

 
    <div class="row height"> 
 
    <div class="col-xs-6 col-md-6 left"> 
 
    </div> 
 
    <div class="col-xs-6 col-md-6 right"> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2016-08-12 05:07:59 Srijith

ich Ihren Code nicht geändert haben, ersetzen Sie einfach durch ein einfaches Bild. Es funktioniert gut, vielleicht sollten Sie die Abmessungen der Datei court.png überprüfen.

my image file

test result

Quelle

2016-08-12 05:34:51 pepperpapa

Erste sein eine sehr schlechte Praxis Bootstrap-Reihe-Klasse mit einer anderen Klasse zu verwenden, stattdessen sollten Sie Ihre Klasse unterhalb der Zeile Klasse hinzuzufügen. Hier ist ein Weg, wie Sie die Bilder perfekt ausrichten können, ändern Sie einfach den HTML-Teil Ihres Codes zu folgenden.

<body> 
<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-12"> 
     <div class="height"> 
     <div class="col-md-6 left"> 

     </div> 
     <div class="col-md-6 right"> 

     </div> 
     </div> 
    </div> 
    </div> 
    </div> 
</div> 
</body>

Quelle

2016-08-12 05:56:40 Navnit

Hintergrundbilder ist nicht richtig ausgerichtet

Antwort

Verwandte Themen