使用CSS将两个背景图像与div一起响应

Question

我正在努力让2个背景图像彼此同步缩小,所以我的座位计划将适用于手机/平板电脑.

我已经尝试了背景封面,包含,100%并将其他div值设置为100%,但是保持这些座位就位没有乐趣.

因此,不仅650px以下的座位图需要缩小背景图像,而且座位图像也需要缩小 - 他们需要保持在座位平面上的位置.包含的div当前设置为15px以显示座位图像.

这是我正在使用的原始静态宽度代码 https://jsfiddle.net/kjyopdL8/

座位尺寸应为15px,直到座位图低于650px,然后座位图像与主要座位图图像同步缩小,同时保持相同的位置和比例

#theatre {
  width: 650px;
  float: left;
  padding-right: 5px;
  margin: 25px 15px 0 10px;
}

.container {
  width: 100%;
  margin: 0 auto;
}

#bmessage {
  padding: 1px 3px;
  height: 20px;
  font-size: 14px;
  background: #ddf;
  color: #080;
  font-weight: bold;
}
#seats:before {
  content: url('http://i.imgur.com/qn56yss.gif');
}

#seats {
  margin: 10px 0;
  padding: 10px 0;
  position: relative;
}

#seats div {
  position: absolute;
  width:15px;
  height:15px;
}

#seats .s1.std.grey {
  background: url('https://s3.postimg.org/g9dq32nqr/1_1_2.png') no-repeat center top;
}

<div id="theatre">
  <div class="container">
    <div id="bmessage">Select the seats that you need.</div>
    <div id="seats">
      <div class="s1 std grey" si="0" title="A16" style="top:16%; left:8.5%;"></div>       
      <div class="s1 std grey" si="1" title="A15" style="top:16%; left:12%;"></div>
      <div class="s1 std grey" si="2" title="A14" style="top:16%; left:15.5%;"></div>       
      <div class="s1 std grey" si="3" title="A13" style="top:16%; left:19%;"></div>
    </div>
  </div>

Answer 1

你的CSS有很多错误。如果您希望容器具有响应性，请不要在容器上指定固定宽度。我编辑了你的小提琴并想出了这个：https://jsfiddle.net/kjyopdL8/4/

#seats:before {
    content: '';
    display: block;
    padding: 50%;
}

#seats {
    margin: 10px 0;
    padding: 10px 0;
    position: relative;
    background-image: url(http://i.imgur.com/qn56yss.gif);
    background-repeat: no-repeat;
    background-size: cover;
}

看一下之前的伪选择器。它成功了！