HTML - CSS将图像放入框架

我想将图像放入框架（其中框架是iPhone图片）。HTML - CSS将图像放入框架

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

从视图CSS点足够这样做：

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

当每个图像具有iphone背景（iphone_bk.png）和填充有以精确地装配在的画面进行调整苹果手机。

有什么建议吗？

来源

2010-12-07 Kerby82

是标准尺寸的图像，以便它们完全适合iPhone背景的屏幕？ – glenatron 2010-12-07 13:57:28

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

来源

2010-12-07 14:05:05 Sotiris

我会使用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 
}

来源

2010-12-07 13:58:18 Bojangles

是的，这工作。

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

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

来源

2010-12-07 13:58:44 Guffa

HTML - CSS将图像放入框架

回答

相关问题