如何让背景渐变填充应用于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的屏幕？

回答

相关问题