HTML - CSS將圖像放入框架

Question

我想將圖像放入框架（其中框架是iPhone圖片）。

我希望圖像看起來像iphone的屏幕。

從視圖CSS點足夠這樣做：

> img.pic{padding:100px; background: url(iphone_bk.png) no-repeat} 

當每個圖像具有iphone背景（iphone_bk.png）和填充有以精確地裝配在的畫面進行調整蘋果手機。

有什麼建議嗎？

Answer 1

您可以使用position:relative;作爲屏幕。

HTML

<div class="iphone"> 
    <div class="screen"></div> 
</div> 

CSS

.iphone { 
    background:url(iPhone-Screen-001.png) no-repeat; 
    height: 371px; 
    width: 200px; 
} 
.iphone .screen { 
    width:155px; 
    height:223px; 
    background:#39F; 
    position:relative; 
    top:76px; 
    left:22px; 

} 

活生生的例子：http://jsbin.com/epewi3

你可以改變藍色背景與背景圖像中的.iphone .screen選擇

Answer 2

我會使用div這是iPhone圖像的大小，並將手機圖像設置爲background: url(iphone_bk.png) no-repeat的背景，如上所述。然後我把一個img標籤的DIV中，並用它來保持 '屏幕' 的形象，就像這樣：

HTML：

 
<div id="container"> 
    <img src="img.png"> 
</div> 

CSS：

 
#container 
{ 
    background: url(iphone_bk.png) no-repeat 
    padding: 10px 5px 5px 10px   // Change this to whatever padding makes 
             // your 'screen' image fit the iPhone image 
} 

Answer 3

是的，這工作。

您可以爲頂部，右側，底部和左側邊框指定單獨的填充，這對於定位手機圖像上的屏幕區域應該很有用。例如：

img.pic { 
    padding: 30px 10px 50px 10px; 
    background: url(iphone_bk.png) no-repeat; 
    width: 120px; 
    height: 200px; 
}