由设置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>
  12. </body>
  13. </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>
  13. </body>
  14. </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>
  16. </body>
  17. </HTML>

 

参考文档:

CSS解决高度自适应问题

 

转载于:https://www.cnblogs.com/jeacy/p/6531988.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值