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

在position: relative中使用.phone，以便我们可以根据自己的上/左侧定位子元素。
由于标准堆叠顺序，＃phone-content已高于手机Chrome。
然后使用position，top和left属性，我们可以移动内容图层以匹配所需的占位符

Raed一些与css位置属性相关的文章（例如http://css-tricks.com/almanac/properties/p/position/），你会非常清楚;）

Answer 2

有很多方法可以做到这一点，最简单的方法可能是使用绝对定位：

<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 {
    position:relative;
    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%;
}
.phone img{
    top:130px;
    position:absolute;
    width:285px;
    left:25px;
}

我已将position:relative;添加到.phone，因为我们使用的是position:absolute;方法。然后，我只是将它放在屏幕上。

图像层次结构

2 个答案: