在页面上工作时出现线性梯度错误

Question

我的网站有问题。我创建了一个带有悬停打开的导航菜单的网站，但我只能设置背景颜色并且我想设置线性渐变背景。我尝试编辑代码并添加一些代码，但没有用。你有什么想法吗？你能帮我解决这个问题吗？非常感谢。

<!DOCTYPE html>
<html>
<head>
      <title>Domov | Webstránka MENU</title> 
<link rel="icon" href="/minimenu.png">
<meta charset=utf-8>
 </head>
 
 <body style=background-image:blue><div class="area"></div><nav class="main-menu"><img src="https://i.ibb.co/xC42G9x/f19ada7376b147df815f4dc7438317e0-5.png" alt="Trulli" width="155" height="">
           <ul style="background-color:darkblue;">
               <li>
                   <a href="/welcome.php">
                      
                     <i class="fa fa-home fa-2x"></i>
                       <span class="nav-text">
                           Domov
                       </span>
                   </a>
                 
               </li>
               <li class="has-subnav">
                   <a href="#">
                       <i class="fa fa-book fa-2x"></i>
                       <span class="nav-text">
                           Domáce úlohy
                       </span>
                 </a>
               </li>
               <li class="has-subnav">
                   <a href="#">
                       <i class="fa fa-users fa-2x"></i>
                       <span class="nav-text">
                           Suplovanie
                       </span>
                 </a>
               </li>
               <li class="has-subnav">
                   <a href="#">
                      <i class="fa fa-list fa-2x"></i>
                       <span class="nav-text">
                       Známky    
                       </span>
                   </a>
                   
               </li>
               <li class="has-subnav">
                   <a href="#">
                      <i class="fa fa-table fa-2x"></i>
                       <span class="nav-text">
                           Rozvrh hodín
                       </span>
                   </a>
                  
               </li>
               <li>
                   <a href="#">
                       <i class="fa fa-leanpub fa-2x"></i>
                       <span class="nav-text">
                           Učebný materiál
                       </span>
                   </a>
               </li>
               <li>
                   <a href="#">
                       <i class="fa fa-gamepad fa-2x"></i>
                       <span class="nav-text">
                           Hry
                       </span>
                   </a>
               </li>
             <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
             <p hidden>TU SA ZACINA SUBMENU</p>
               <li>
                  <a href="#">
                      <i class="fa fa-bars fa-2x"></i>
                       <span class="nav-text">
                           Submenu 1
                       </span>
                   </a>
               </li>
               <li>
                  <a href="#">
                       <i class="fa fa-bars fa-2x"></i>
                       <span class="nav-text">
                           Submenu 2
                       </span>
                   </a>
               </li>
             <p hidden>TU SA KONCI SUBMENU</p>  
           </ul>

           <ul class="logout">
               <li>
                  <a href="/index.php">
                        <i class="fa fa-sign-out fa-2x"></i>
                       <span class="nav-text">
                           Odhlásiť sa
                       </span>
                   </a>
               </li>  
           </ul>
       </nav>
   <zarovnanie>
   <h1>Vitajte, v uživeteľskej sekcii!</h1><br><p>Orientujte sa pomocou navigácie vľavo</p>
   </zarovnanie>
  <style>zarovnanie {
    text-indent: 60px;
    }</style>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  
 </body>
   
   <style>@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
}


.main-menu:hover,nav.main-menu.expanded {
width:250px;
overflow:visible;
}

.main-menu {
background:darkblue;
border-right:1px solid #e5e5e5;
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
width:60px;
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
-webkit-transform:translateZ(0) scale(1,1);
z-index:1000;
}

.main-menu>ul {
margin:7px 0;
}

.main-menu li {
position:relative;
display:block;
width:250px;
}

.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#999;
font-family: arial;
font-size: 14px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
transition:all .1s linear;
 
}

.main-menu .nav-icon {
position:relative;
display:table-cell;
width:60px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}

.main-menu .nav-text {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
 font-family: 'Titillium Web', sans-serif;
}

.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;
}

.no-touch .scrollable.hover {
overflow-y:hidden;
}

.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
}

a:hover,a:focus {
text-decoration:none;
}

nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}

nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#fff;
background-color:#5fa2db;
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
@font-face {
 font-family: 'Titillium Web';
 font-style: normal;
 font-weight: 300;
 src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}
</style>
<style>
h1 {
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}
h2 {
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}
h3 {
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}
h4 {
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}
h5 {
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}
p {
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}

</style>
</html>
</div>

Answer 1

正文元素需要线性渐变背景。

现有代码中的几个问题：body 中的样式属性值周围缺少引号，背景图像已被赋予颜色值，但背景图像需要图像值。

此代码段放置了一个非重复背景图像，它是从上到下（默认方向）从蓝色到青色的线性渐变。

请注意，主体只有其内容的高度，您可能希望至少为其提供视口的高度。当然，您会想要更改线性渐变中的值以获得您想要的任何效果。

<!DOCTYPE html>
<html>

<head>
  <title>Domov | Webstránka MENU</title>
  <link rel="icon" href="/minimenu.png">
  <meta charset=utf-8>
</head>

<body style="background-image:linear-gradient(blue, cyan);background-size: cover; background-repeat: no-repeat;">
  <div class="area"></div>
  <nav class="main-menu"><img src="https://i.ibb.co/xC42G9x/f19ada7376b147df815f4dc7438317e0-5.png" alt="Trulli" width="155" height="">
    <ul style="background-color:darkblue;">
      <li>
        <a href="/welcome.php">

          <i class="fa fa-home fa-2x"></i>
          <span class="nav-text">
                           Domov
                       </span>
        </a>

      </li>
      <li class="has-subnav">
        <a href="#">
          <i class="fa fa-book fa-2x"></i>
          <span class="nav-text">
                           Domáce úlohy
                       </span>
        </a>
      </li>
      <li class="has-subnav">
        <a href="#">
          <i class="fa fa-users fa-2x"></i>
          <span class="nav-text">
                           Suplovanie
                       </span>
        </a>
      </li>
      <li class="has-subnav">
        <a href="#">
          <i class="fa fa-list fa-2x"></i>
          <span class="nav-text">
                       Známky    
                       </span>
        </a>

      </li>
      <li class="has-subnav">
        <a href="#">
          <i class="fa fa-table fa-2x"></i>
          <span class="nav-text">
                           Rozvrh hodín
                       </span>
        </a>

      </li>
      <li>
        <a href="#">
          <i class="fa fa-leanpub fa-2x"></i>
          <span class="nav-text">
                           Učebný materiál
                       </span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-gamepad fa-2x"></i>
          <span class="nav-text">
                           Hry
                       </span>
        </a>
      </li>
      <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
      <p hidden>TU SA ZACINA SUBMENU</p>
      <li>
        <a href="#">
          <i class="fa fa-bars fa-2x"></i>
          <span class="nav-text">
                           Submenu 1
                       </span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-bars fa-2x"></i>
          <span class="nav-text">
                           Submenu 2
                       </span>
        </a>
      </li>
      <p hidden>TU SA KONCI SUBMENU</p>
    </ul>

    <ul class="logout">
      <li>
        <a href="/index.php">
          <i class="fa fa-sign-out fa-2x"></i>
          <span class="nav-text">
                           Odhlásiť sa
                       </span>
        </a>
      </li>
    </ul>
  </nav>
  <zarovnanie>
    <h1>Vitajte, v uživeteľskej sekcii!</h1><br>
    <p>Orientujte sa pomocou navigácie vľavo</p>
  </zarovnanie>
  <style>
    zarovnanie {
      text-indent: 60px;
    }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</body>

<style>
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.fa-2x {
  font-size: 2em;
}
.fa {
  position: relative;
  display: table-cell;
  width: 60px;
  height: 36px;
  text-align: center;
  vertical-align: middle;
  font-size: 20px;
}
.main-menu:hover,
nav.main-menu.expanded {
  width: 250px;
  overflow: visible;
}
.main-menu {
  background: darkblue;
  border-right: 1px solid #e5e5e5;
  position: absolute;
  top: 0;
  bottom: 0;
  height: 100%;
  left: 0;
  width: 60px;
  overflow: hidden;
  -webkit-transition: width .05s linear;
  transition: width .05s linear;
  -webkit-transform: translateZ(0) scale(1, 1);
  z-index: 1000;
}
.main-menu>ul {
  margin: 7px 0;
}
.main-menu li {
  position: relative;
  display: block;
  width: 250px;
}
.main-menu li>a {
  position: relative;
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
  color: #999;
  font-family: arial;
  font-size: 14px;
  text-decoration: none;
  -webkit-transform: translateZ(0) scale(1, 1);
  -webkit-transition: all .1s linear;
  transition: all .1s linear;
}
.main-menu .nav-icon {
  position: relative;
  display: table-cell;
  width: 60px;
  height: 36px;
  text-align: center;
  vertical-align: middle;
  font-size: 18px;
}
.main-menu .nav-text {
  position: relative;
  display: table-cell;
  vertical-align: middle;
  width: 190px;
  font-family: 'Titillium Web', sans-serif;
}
.main-menu>ul.logout {
  position: absolute;
  left: 0;
  bottom: 0;
}
.no-touch .scrollable.hover {
  overflow-y: hidden;
}
.no-touch .scrollable.hover:hover {
  overflow-y: auto;
  overflow: visible;
}
a:hover,
a:focus {
  text-decoration: none;
}
nav {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
nav ul,
nav li {
  outline: 0;
  margin: 0;
  padding: 0;
}
.main-menu li:hover>a,
nav.main-menu li.active>a,
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus,
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,
.dashboard-page nav.dashboard-menu ul li.active a {
  color: #fff;
  background-color: #5fa2db;
}
.area {
  float: left;
  background: #e2e2e2;
  width: 100%;
  height: 100%;
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 300;
  src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}
</style>
<style>
  h1 {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
  }
  
  h2 {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
  }
  
  h3 {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
  }
  
  h4 {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
  }
  
  h5 {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
  }
  
  p {
    font-family: Arial, Helvetica, sans-serif;
    color: white;
  }
</style>

</html>
</div>

在页面上工作时出现线性梯度错误

Linear-gradient error with working on page

html

css

background

colors

linear-gradients