由设置body线性背景色引发的问题-----当声明文档类型时，对body设置线性背景色，页面背景色无法整体线性过渡

问题：当声明文档类型时，对body设置线性背景色，页面背景色无法整体线性过渡

 不声明文档类型时，对body设置线性背景色

  1. <HTML>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>Title</title>
  5.     <style>
  6.         body{
  7.             background: linear-gradient(to bottom, #fff, #000);
  8.         }
  9.     </style>
  10. </head>
  11. <body>
  13. </body>
  14. </HTML>

显示如下： 

 

声明文档类型后，显示如下

  1. <!DOCTYPE html>
  2. <HTML>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         body{
  8.             background: linear-gradient(to bottom, #fff, #000);
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  14. </body>
  15. </HTML>

最终解决方案：

  1. <!DOCTYPE html>
  2. <HTML>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         html, body{
  8.             height: 100%;
  9.         }
  10.         body{
  11.            background: linear-gradient(to bottom, #fff, #000);
  12.        }
  13.     </style>
  14. </head>
  15. <body>
  17. </body>
  18. </HTML>
参考文档：

CSS解决高度自适应问题

 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/jeacy/p/6531988.html