使用角度添加背景圖片時出錯

-1

我嘗試添加背景圖片並使用封面讓瀏覽過的圖片調整大小。然而，圖像非常小，並沒有覆蓋整個背景。使用角度添加背景圖片時出錯

我是新來的角，所以我對這是如何工作有一個非常小的想法。

此外，儘管使用zurb來管理間距，但搜索欄並不在中間。

這裏是頁面的樣子 enter image description here

下面是代碼：

<div > 

    <!-- Above fold --> 
    <div class="row"> 

     <div id = "backgroundImage" class="large-12 small-12 columns" ng-style="{'background-image':'url(img/mainBackground.png)','background-size' : 'cover'}"> 

      <!-- search bar --> 
      <div class="row"> 

       <!--empty --> 
       <div class="large-3 small-3 columns"> 
        &nbsp; 
       </div> 

       <div class="large-6 small-6 columns"> 
        <input type="text" id="searchBar" ng-style="{'width': '50%'}"> 
       </div> 

       <!--empty --> 
       <div class="large-3 small-3 columns"> 
        &nbsp; 
       </div> 

      </div> 

     </div> 
    </div> 

</div>

來源

2013-10-21 William Falcon

基於代碼您提供，造型是通過AngularJS的div提供絕對沒有好處。使用樣式表。 – Marko

添加到@馬爾科的迴應，您使用的角樣式屬性，但您提供的樣式只是靜態的。 Angular的ng-style屬性旨在用於具有基於給定條件的運行時應用的動態樣式。你沒有這樣做。您只需提供內嵌的想要應用的靜態樣式。這並不是最佳做法。最好是使用靜態CSS樣式表來做你想做的事。

這就是說，你面對的問題純粹是一個CSS，而不是一個角度特定的問題。你只需要在你的#backgroundImage div上調試你的風格，你將消除使用ng-style時涉及的很多複雜性。

下面是使用全頁面的CSS背景圖像一個很好的教程：http://css-tricks.com/perfect-full-page-background-image/

來源

2013-10-21 21:39:22 tennisgent

感謝您的闡述，我很懶惰:) – Marko

使用角度添加背景圖片時出錯

回答

相關問題