如何讓背景漸變填充應用於div的屏幕？

好的，這是我的佈局。 section部分是部分內容，當/ login路徑加載時，會使用AngularJS動態加載到屏幕中。現在，我想在section上有background-image漸變屬性，我希望在整個屏幕上顯示漸變效果。我怎樣才能做到這一點？如何讓背景漸變填充應用於div的屏幕？

<html> 
<head></head> 
<body> 
    <main ng-view> 
    <section class="login"> 
    <form>...</form> 
    </section> 
    </main> 
</body> 
</html>

來源

2014-11-13 Abhinandan N.M.

將該漸變添加到body？ –

@LimH。我不能這樣做，因爲登錄部分將使用angularjs動態加載。而整個機構有一個單一的CSS文件。 –

爲什麼不給課程添加一個課程，然後在這個課堂上應用漸變？ – Veve

你可以嘗試在你的CSS以下

.login{ 
    overflow:hidden; /* this may or may not be required */ 
    background: /* details of section background here */ 
} 

html{ 
    background: /* details of page background here */ 
}

希望這有助於一些鏈接！

來源

2014-11-13 16:34:09

這不是工作http://codepen.io/nmabhinandan/pen/pvoRym –

@ AbhinandanN.M。這是接近你以後的事情嗎？ http://codepen.io/panchroma/pen/emYgyJ –

如果你添加一個類<body>，再增添風格的部分，你可以有一個完整的漸變背景無javascript：

<html> 
<head></head> 
<body class="bg"> 
    <main ng-view> 
    <section class="login"> 
    <style type="text/css"> 
     .bg{ 
      background: linear-gradient(red, blue); 
     } 
    </style> 
    <form>...</form> 
    </section> 
    </main> 
</body> 
</html>

來源

2014-11-13 17:01:54 Veve

我只想在登錄頁面上使用漸變。我不希望在我的儀表板中也存在於同一個「主體」中。登錄頁面將在運行時動態加載使用angularjs –

我不明白...您將適用於正文的樣式只會在您的部分動態收取時應用。如果該部分未加載，則不會應用任何樣式。 – Veve

剪斷這一點的JS解決我的問題。如果不使用js，我認爲實現這一點幾乎是不可能的。

$('#first').height(function(index, height) { 
    return window.innerHeight - $(this).offset().top; 
});

來源

2014-11-14 15:38:30

如何讓背景漸變填充應用於div的屏幕？

回答

相關問題