Javascript 如何使背景渐变填充应用于div的屏幕？_Javascript_Jquery_Angularjs_Css_Frontend

Javascript 如何使背景渐变填充应用于div的屏幕？

javascript jquery angularjs css

Javascript 如何使背景渐变填充应用于div的屏幕？,javascript,jquery,angularjs,css,frontend,Javascript,Jquery,Angularjs,Css,Frontend,好的，这是我的布局。节部分是一个部分，在加载/login路由时，使用AngularJS动态加载到屏幕中。现在，我想在部分上有一个背景图像梯度属性，我想在整个屏幕上有这个梯度。我该怎么做 <html> <head></head> <body> <main ng-view> <section class="login"> <form>...</form> </secti

好的，这是我的布局。节部分是一个部分，在加载/login路由时，使用AngularJS动态加载到屏幕中。现在，我想在部分上有一个背景图像梯度属性，我想在整个屏幕上有这个梯度。我该怎么做

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

您可以尝试在css中链接以下内容

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

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

希望这有帮助

如果向添加一个类，然后在小节中添加样式，则可以在不使用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>

这个小小的js剪解决了我的问题。我认为如果不使用js，几乎不可能实现这一点

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

把那个梯度加到身体上？@LimH。我不能这样做，因为登录部分将使用angularjs动态加载。而且整个主体只有一个css文件。为什么不在主体中添加一个类，然后在这个类上应用一个渐变呢；那个部分？你们能创建一个100%宽度的div来包裹这个部分，然后对那个div应用渐变吗？你的HTML将是主要的，但我不知道你在用什么，因为我想梯度只在登录页面上。我不想在我的仪表板，也驻留在同一机构。登录页面将在运行时使用angularjsI不理解动态加载。。。您将应用于body的样式将仅在由您的节动态充电时应用。如果未加载节，则不会应用任何样式。@AbhinandanN.M。这和你想要的接近吗？