浅析b3log错误页面中的背景线性渐变

Published on in 前端 with 1,961 views and 6 comments

今天一大早来逛逛黑客派,结果站点居然崩溃了,不过错误页面的效果还挺好看的,仔细看了看代码,居然找到一个小 bug….那就只好写篇博文吐槽一下咯…ps:要不要把服务器nginx的错误日志拿出来给我们爽爽?

bug

错误页面的样式代码部分有如下代码:

.body--ready {
  background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: -moz-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: -o-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: -ms-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
  background: linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);
}

代码很简单,对背景的渐变做一个设置,咋一看也没啥问题,但是问题就出在:

background: linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);

linear-gradient,W3C标准线性渐变语法,第一个参数值应该改为 “to top”,这里看是要求从top开始进行渐变,渐变到bottom,所以应该改为:

background: linear-gradient(to bottom, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);

渐变原理

作为一名乐(ai)于(guan)助(xian)人(shi)的程序猿,我觉得有必要帮助大家分析一下,这个

  -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, rgb(55, 148, 192) 120%);

里面的参数是表示什么意思。

第一个参数:

  • top ,表示从顶部开始往下进行渐变
  • left,表示从左边开始往右进行渐变
  • right
  • bottom

要注意,如果用的是linear-gradient,那么参数将变成:

  • to top , 表示从底部开始往上进行渐变
  • to left
  • to right
  • to bottom

第二个参数和第三个参数 rgb(203,235,219) 0%,rgb(55, 148, 192) 120%

现在我们假设整个div是一个长度为100px的区域,假定从最左边开始渐变,那么上面的两个参数就表示,以rgb(203,235,219)这个颜色,在最左边开始渲染,然后以rgb(55, 148, 192)这个颜色,在离最左边120px的位置开始渲染,当然我们的div只有100px,超出的部分我们是看不见的,那中间的区域呢?就是从第一个颜色到第二个颜色的渐变啦,同理我们也可这么写:

background: -webkit-linear-gradient(top, rgb(203, 235, 219) 0%, white 10% , black 20% , green 80% , rgb(55, 148, 192) 120%);

上面的代码就表示,从顶部开始,从起始位置以rgb(203, 235, 219)这个颜色,朝着离起始位置10%距离的白色进行渐变,然后再从白色,朝着离起始位置20%距离的黑色进行渐变,再从黑色开始,朝着离起始位置80%的绿色进行渐变,最后再朝着离起始位置120%距离的rgb(55, 148, 192)进行渐变,超出的部分不会被显示出来。

Responses
  • 嗯,error页面对.body–ready定义的样式中,有一个不合规范的问题。

    Reply
  • 对了,你还没告诉我你所说的有问题的 css 是在哪一个页面的什么位置?

    Reply
  • 这个使用工具生产的。配置一下需要兼容到的版本就好。

    Reply
  • 嗯,-webkit-linear-gradient,-moz-linear-gradient,-o-linear-gradient,-ms-linear-gradient,linear-gradient具体用的哪一个是视浏览器不同而不同,比如我现在用的chrome,就只支持-webkit-linear-gradient和linear-gradient,当然linear-gradient需要修改第一个参数的值,不然渐变的背景不会显示出来。

    所以我猜,当初把它们全部写上去应该是为了兼容不同浏览器的。

    Reply
  • 非常感谢,但是代码写的时间有点长,我可以具体问一下是哪里有用到么?

    Reply
  • 谢谢分享 @Vanessa

    Reply