Question

所以我要做的是首先给容器一个背景图像，然后使用bootstrap的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>

Answer 1

您可以写为

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

Answer 2

再次检查图像尺寸以确保它们匹配。在这里看到我使用了两个尺寸相同的图像，它们完美对齐。

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

Answer 3

我没有更改你的代码，只是用简单的图片替换。它运作良好，也许你应该检查court.png文件的尺寸。

my image file

test result

Answer 4

首先，将bootstrap行类与任何其他类一起使用是一种非常糟糕的做法，而应该在行类下面添加类。这是一种可以让图像完美对齐的方法，只需将代码的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>

背景图像未正确对齐

4 个答案: