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

【问题标题】：How to center the left edge of background image using css如何使用css将背景图像的左边缘居中
【发布时间】：2017-02-24 07:25:11
【问题描述】：

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

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

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

这是一个粗略的标记。

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

【问题讨论】：

您希望它在移动设备上的哪个位置？
我希望图像像上图一样堆叠在内容下方。

标签： css twitter-bootstrap-3 responsive-design

【解决方案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%;
  }
}

希望对你有帮助！

【讨论】：