如何将HTML对象放在移动容器中

Question

我想在我的网页中放置一个移动图片，我想要显示该移动设备内的所有内容。为了实际演示，请查看http://goratchet.com/components/ 请告诉我怎么做。 Live Demo

Answer 1

试试此代码段：https://jsfiddle.net/nwmbm21f/

HTML：

<div class="device" style="" id="barsInDevice" style="background-color:Lime;"></div>

CSS：

.device {
    position: relative;
    top: 50px;
    display: block;
    width: 395px;
    height: 813px;
    margin-left: -20px;
    font-family: "Helvetica Neue",sans-serif;
    background-image: url(http://goratchet.com/assets/img/device-sprite.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 300%;
    -webkit-transition: background-image .1s linear;
    -moz-transition: background-image .1s linear;
    transition: background-image .1s linear;
}

您只需要在图像边界内添加所需内容。