css - 如何将自动缩放图像与自动缩放背景重叠

Question

我正在尝试将图像放在位于可缩放 div 中的虚拟白板上。

我按照本指南制作了“白板”比例尺:Stretch and scale CSS background

您可以在此处查看演示:http://staging1.populearn.com/new.html

我不知道如何将这些红色方 block 移到白板上，并让它们也缩放。有可能吗？

干杯

这是 HTML:

      <div class="lesson-pane">

        <div id="chalkboard-background">
          <img src="/img/whiteboard_teacher.png" class="stretch" alt="" />

        <div id="chalkboard">
          <div id="chalkboard-images">
            <span id="image1" class="33"><img src="/img/1.png" alt="" /></span>
            <span id="image2" class="33"><img src="/img/2.png" alt="" /></span>
            <span id="image3" class="33"><img src="/img/3.png" alt="" /></span>
          </div><!--/chalkboard-images-->   
        </div><!--/chalkboard-->

        </div><!--/chalkboard-background-->
      </div><!--/lesson-pane-->

这是 CSS:

.lesson-pane {
  padding: 20px;
  margin-bottom: 30px;
  background-color: #f5f5f5;
  background-image:url('/img/background_europe.png');
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  border-style:solid;
  border-width:3px;
  max-width: 850px;
}
.lesson-pane h1 {
  margin-bottom: 0;
  font-size: 60px;
  line-height: 1;
  letter-spacing: -1px;
}
.lesson-pane p {
  font-size: 18px;
  font-weight: 200;
  line-height: 27px;
}

#chalkboard {
    position: relative; 
}

#chalkboard-background {
    width: 100%; 
    position: relative; 
}

.stretch {
    width:100%;
}

.33 {
    width:33%;  
}

#chalkboard-images {
    position: relative; 
    width:100%;
}

Answer 1

如果要缩放，则需要确保使用相同类型的度量，在本例中为百分比。然后，将你的黑板完全放在图形的顶部，然后告诉三个图像容器中的每一个占据其空间的 1/3，并且其中的每个图像拉伸(stretch)到 100%。

这是实现该功能的 CSS (除了您现有的 CSS 之外，您还可以在后面粘贴它)

/* Make .lesson-pane use relative % padding */
.lesson-pane {padding:2%;}

/* Absolutely position ".chalkboard" over graphic (approx) */
#chalkboard {position:absolute; left:3%; top:5%; width:77%; height:75%;}

/* Make each image take up 1/3 of space and scale */
#chalkboard-images {white-space:nowrap; font-size:0px; text-align:center;}
#chalkboard-images > span {display:inline-block; width:31.3%; margin:1%;}
#chalkboard-images > span > img {width:100%; height:auto;}