如何使用css使背景图像的左边缘居中

Question

我得到了一个设计，我在构建响应式网站时遇到了很多麻烦。

我希望图像延伸到浏览器窗口的边缘，所以我将它作为背景图像放在流体容器中，并带有间隔图像。问题是，一旦我们移动，背景图像将出现在上面的副本下方。

我已经尝试了这种布局的其他几个版本，但没有任何作用。希望有人有一个建议。

这是一个粗略的标记。

.test {
  background-image: url(http://placehold.it/1600x500 );
  background-repeat: no-repeat;
  background-position: 50% bottom;
  background-size: cover;
  padding: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid test">
  <div class="container">
  <div class="row">
    <div class="col-md-6" style="background-color: blue;">left col</div>
  <div class="col-md-6"><img src="http://placehold.it/20x500/b0b0b0" alt="spacer"></div>
  </div>
  </div>
</div>

Answer 1

实现响应效果的一种方法是相应地更改background-size以匹配新的可视化。这样，您可以从50% 100%更改为其右对齐的桌面版本，并移至100% 50%移动版本，它填充组件高度的一半。

作为一个例子，我创建了this jsFiddle demo，就像这样：

html几乎相同：

<div class="container bg-pink">  
    <div class="row half-bg">
      <div class="col-sm-6">
        <p class="text-right">
          <b>bold text first with some nuances</b> then some normal text to break the line. then some normal text to break the line. then some normal text to break the line.then some normal text to break the line.then some normal text to break the line.then some normal text to break the line.
        </p>
      </div>
      <div class="col-sm-6 no-gutter">
        <div class="half-holder">
        </div>
      </div>

    </div>
</div>

我们定义的CSS（重要位）：

/* Image */
.half-holder {
  height: 100px;
}

/* Normal */
.half-bg {
    background: url('https://maxwelldemon.files.wordpress.com/2012/03/2x1-triangle.png') no-repeat right bottom;
    background-size: 50% 100%;
}

/* The media query for responsive */

@media (max-width: 768px) {
  .half-bg {
    background-size: 100% 50%;
  }
}

希望它有所帮助！