Question

我需要制作手机轮廓覆盖textarea的内容。

这是img source，我目前的代码是：

CSS：

div.sms{
    position: absolute;
    top:0;
    left:0
    z-index:99;
}

div.sms img{
    width: 300px;
    height: 510px;
}

div.sms textarea{
    position: absolute;
}

HTML：

<div class="row">
   <div class="col-md-6 sms">
       <img src="http://i.imgur.com/S66oEHW.png"/>
       <textarea rows="4"></textarea> 
    </div>
</div>

Answer 1

您可以将图片放置为包装器div的背景，只需将textarea放在带有边距的包装内：

<强> DEMO

.wrap{
    background: url('http://i.imgur.com/S66oEHW.png') no-repeat;
    background-size: contain;
    height:500px;
    min-width:300px;
}
.wrap textarea{
    margin:75px 0 0 53px;
    width:183px;
    height:350px;
}

<div class="wrap">
    <textarea></textarea>
</div>

Textarea里面的图像

1 个答案: