Border Image Bootstrap

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>

您正在尋找這樣的事情？