背景圖像沒有正確對齊

所以我想要做的是先給一個容器一個背景圖像，然後使用引導程序的col-md-6創建兩個div標籤。主要的div背景圖像只是草紋理。在兩個div標籤中，我給出了足球場骨架的背景圖像。所以我花了一半給一個div，然後採用相同的圖像轉換180.但它不是如預期的那樣。不知道這裏出了什麼問題。背景圖像沒有正確對齊

<!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>

來源

2016-08-12 scripter

使用瀏覽器的控制檯，並通過從那裏調整它來檢查正確的高度。 –

你可以容納這些圖像，以便我們可以通過小提琴檢查嗎？ –

background-position：center center; – Nath

你可以寫爲

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

來源

2016-08-12 05:05:39

再次查看圖像的尺寸以確保它們匹配。看到這裏我已經使用了兩個尺寸相同的圖像，並且它們完美對齊。

.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>

來源

2016-08-12 05:07:59 Srijith

我沒有改變你的代碼，只是一個簡單的圖片代替。它運作良好，也許你應該檢查court.png文件的尺寸。

my image file

test result

來源

2016-08-12 05:34:51 pepperpapa

首先它的一個非常不好的做法是使用自舉行類與其他類，而應該添加的行級以下類。這裏有一種方法可以讓圖像完美對齊，只需將代碼的html部分更改爲以下內容即可。

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

來源

2016-08-12 05:56:40 Navnit

背景圖像沒有正確對齊

回答

相關問題