이미지 안의 텍스트 영역

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>