Question

我想将图像放入一个框架（框架是iPhone图片）。

我希望图片看起来像是iphone的屏幕。

从CSS的角度来看，这就足够了：

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

每个图像都有iphone背景（iphone_bk.png），并且必须调整填充以便完全适合iPhone的屏幕。

有什么建议吗？

Answer 1

我使用的是div，其大小与iPhone图像相同，并将手机图像设置为background: url(iphone_bk.png) no-repeat的背景，如上所述。然后，我会在div中添加一个img标记，并使用它来保存“屏幕”图像，如下所示：

<强> 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 2

是的，这有效。

您可以为顶部，右侧，底部和左侧边框指定单独的填充，这对于将屏幕区域定位在手机图像上非常有用。例如：

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

Answer 3

您可以使用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选择器

中的背景图片更改蓝色背景

HTML - CSS将图像放入框架

3 个答案: