javascript - 剪切/重新排列背景居中而不是调整大小

Question

我有一个小测试站点，其中一个 div 的宽度减小到 50%，当我们单击按钮时另一个 div 出现。这是我的 codepen

当您单击该按钮时，图像会调整大小。因为我正在使用:background-size: 100%;但我希望图像向左移动一点，以便居中。

Answer 1

您可以做一件简单的事情:

只需从 content-container div 中删除 bg 图像并将其添加到 body

body{
  background: url("http://foto-muehlbacher.at/wp-content/uploads/2014/01/Landschaft33-1.jpg");
}

这是一个工作示例:

$('#button').click(function(){
  $('.new-content').toggleClass('half').delay(0).fadeIn(200);
  $('.content-container').toggleClass('half').style.width = "50%".backgroundSize = "200%";
});

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
}
body{
  background: url("http://foto-muehlbacher.at/wp-content/uploads/2014/01/Landschaft33-1.jpg");
}
.content-container {
  height: 100vh;
  display: block;
  background-size: 100%;
  float: left;
  width: 100%;
  position: relative;
  transition: .2s ease-in-out;
}
.new-content {
  display: none;
  overflow: auto;
  float: right;
  width: 0;
  height: 100vh;
  background: #f60;
  transition: .2s ease-in-out;
}
.new-content.half,
.content-container.half {
  width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content-container">
  <div class="content">
  <div>text</div>
<div>text</div>
<div>text</div>
<button id="button">
Click me
</button>
  </div>
  </div>
<div class="new-content">
<p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
  </div>