使用角度和自舉將圖像切換到表單後

Question

我試圖在表單上放置背景圖像，並通過單擊列表中的其他圖像來更改圖像。我能夠使用CSS來放置背景圖片，但是我無法弄清楚如何實現我的角度。所以我把它放在一個圖像標籤中，就像我以前在實現我的表單之前一樣。

我的代碼片段在下面，任何指針，將不勝感激！

app.controller('letterCreateCtrl', function($scope, $state){ 
 

 
$scope.current = 'scLetterHead'; 
 

 
});

#responsiveForm{ 
 
    background-size: cover; 
 
    background-size: 100% 100%; 
 
    min-height: 650px; 
 
    padding: 80px; 
 
    padding-top: 120px; 
 
}

<div id="letterForm"> 
 
<section id="contact class" class="container content-section text-center"> 
 
<div class="col-md-3"> 
 
     <img class="img-responsive" src="img/scLetterHead.jpg" ng-click="current='scLetterHead'" /> 
 
     <img class="img-responsive" src="img/scLetterHead2.jpg" ng-click="current='scLetterHead2'" /> 
 
     </div> 
 
     <div class="col-md-3"> 
 
     <img class="img-responsive" src="img/scLetterHead3.jpg" ng-click="current='scLetterHead3'"/> 
 
     <img class="img-responsive" src="img/scLetterHead4.jpg" ng-click="current='scLetterHead4'"/> 
 
     </div> 
 
     <div class="col-md-6"> 
 
      <form id="responsiveForm" action=""> 
 
      <img class="img-responsive" ng-src="img/{{current}}.jpg" /> 
 
      <div class="form-group"> 
 
       <label for="name">Name:</label> 
 
       <input type="text" class="form-control" id="name" name="name"/> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label for="email">Email:</label> 
 
       <input type="text" class="form-control" id="email" name="email"/> 
 
      </div> 
 
      <div class="form-group"> 
 
       <label for="occasion">Occasion:</label> 
 
       <input type="text" class="form-control" id="occasion" name="occasion"/> 
 
      </div> 
 
      <div class="form-group"> 
 
       <input type="submit" name="submit" class="form-control btn btn-primary" value="go"/> 
 
      </div> 
 

 
      </div> 
 
      </form> 
 
     </div> 
 
     <div class="col-md-3"></div> 
 
    </div> 
 
    </div> 
 
</section> 
 
</div>

Answer 1

我只好裹在我的形式，並給它的10 Z指數屬性的類之後，我能夠定位在圖像的頂部形態。