html - 图像层次结构

Question

目前正在通过编写我在网上找到的很酷的网站来学习 html。我无法弄清楚这个网站如何 http://sociali.st将一张图像用于 iPhone 外壳，将另一张图像用于 iPhone 屏幕(想想 photoshop 中的剪切蒙版)。似乎无法理解它？

这是我的代码

<div class="row">
      <div class="small-6 columns">
        <h1 class="value-prop">Organize the <br>things you love.</h1>
      </div>
      <div class="small-6 columns">
        <div class="phone">
          <img src="http://sociali.st/wp-content/themes/socialist/library
                         /images/views/home/home-introduction-screen.png">
        </div>
      </div>
    </div>   

CSS

.phone {        
    width: 359px;
    height: 935px;
    background-image: url('http://sociali.st/wp-content/themes/socialist/
                           library/images/components/devices/device-iphone
                           -5c-perspective-left-shell@2x.png?cache=290611593');
    background-size: 100% 100%;
}

Answer 1

神奇的是使用绝对定位和透明背景，更像是 Photoshop 图层。

检查这个: http://codepen.io/anon/pen/dGxhy

• 在 .phone 中使用 position: relative，这样我们就可以根据它自己的顶部/左侧定位它的子元素。
• 由于标准堆叠顺序，#phone-content 已经位于手机边框上方。
• 然后使用 position、top 和 left 属性，我们可以移动内容层以匹配所需的占位符

阅读了一些与 css 位置属性相关的文章(例如 http://css-tricks.com/almanac/properties/p/position/ )，您会很清楚；)