在頁面上作業時出現線性梯度錯誤-有解無憂

我的網站有問題。我創建了一個帶有導航選單的網站，在懸停時打開，但我只能設定背景顏色，我想設定線性漸變背景。我試圖編輯代碼并添加一些代碼，但不起作用。你有什么想法嗎？你能幫我解決這個問題嗎？非常感謝。

<!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?ebny 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>

uj5u.com熱心網友回復：

body 元素需要線性漸變背景。

現有代碼中有幾個問題：body 中的 style 屬性缺少值周圍的引號，背景影像已被賦予顏色值，但背景影像需要影像值。

這個片段放置了一個非重復的背景影像，它是從藍色到青色從上到下（默認方向）的線性漸變。

請注意，主體只有其內容的高度，您可能希望至少為其提供視口的高度。當然，您會希望更改線性漸變中的值以獲得您想要的任何效果。

<!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?ebny 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/351429.html

標籤：html css 颜色背景线性梯度

上一篇：scaleX在關鍵幀中自動增加

下一篇：單擊復選框后未啟用按鈕