테두리 이미지 부트 스트랩

Question

iphone 프레임 png를 양식의 테두리로 사용하려고하지만이를 파악할 수 없습니다. 아래는 .html과 .css입니다. 보시다시피 저는 비디오를 배경 이미지와 별도의 객체로 시도했습니다. 여기

프레임은 우리가 사용하려는된다 여기 iPhone Frame

우리가 지금 그것을 가지고 어떻게 (이 오른쪽에있는 형태는 /를 대형 기기에서 w) : Form Screenshot

HTML

#phoneform { 
 
     float: right; 
 
     border-image: url(/assets/images/iphone-frame-white.png); 
 
     border: 10px solid transparent; 
 
     padding: 25px; 
 
    } 
 
    #iphoneframe { 
 
     background-repeat: none; 
 
    } 
 
    
 
    #landform { 
 
     background: white; 
 
     width: 360px; 
 
     padding: 40px; 
 
     text-align: center; 
 
     margin-top: 105px; 
 
     margin-left: 15px; 
 
     box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<!-- Signup Form --> 
 
     <div class="container-fluid" id="phoneform"> 
 
     <div class="row"> 
 
      <div class="col-6"> 
 
      <!-- iPhone --> 
 
      <!-- <img src="/assets/images/iphone-frame-white.png" id="iphoneframe"> --> 
 
      <!-- Form --> 
 
      <div class="float hidden-sm-down" id="landform"> 
 
       <h3><strong>Sign Up</strong></h3> 
 
       <app-landing-form></app-landing-form> 
 
       <div class="hidden-md-up"></div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div>

나는 대답이 경계 이미지라고 확신하고 있지만 그것은 나를 위해 일하지 않습니다.

양식 요소 위에 이미지 파일을 두는 방법이 있는지 알고 싶습니다.

도움 주셔서 감사합니다.

는

Answer 1

Codepen Link

#phoneform { 
 
    float: right; 
 
    border: 10px solid transparent; 
 
    padding: 25px; 
 
} 
 

 
#iphoneframe { 
 
    background-repeat: none; 
 
} 
 

 
#landform { 
 
    background-image: url("https://i.stack.imgur.com/pY82X.png"); 
 
    width: 418px; 
 
    height: 855px; 
 
    padding: 40px; 
 
    border-radius: 70px; 
 
    text-align: center; 
 
    margin-top: 105px; 
 
    margin-left: 15px; 
 
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); 
 
} 
 

 
h3 { 
 
    position: relative; 
 
    top: 100px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container-fluid" id="phoneform"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <!-- iPhone --> 
 
    </div> 
 
    <!-- Form --> 
 
    <div class="col-sm-4 col-sm-offset-2"> 
 
     <div class="float hidden-sm-down" id="landform"> 
 
     <h3><strong>Sign Up</strong></h3> 
 
     <app-landing-form></app-landing-form> 
 
     <div class="hidden-md-up"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

이 같은 뭔가를 찾고 계십니까?