圖像層次

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已經高於手機瀏覽器。
• 然後使用position，top和left特性，我們可以移動內容層，以匹配所需的佔位符

拉伊德有關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;方法。然後，我只是把它看起來像屏幕。