顶部滚动彩条

发布于 2020-04-17  280 次阅读


最近发现好多博客顶部都有一个彩色滚动条,研究一下

Document

其实原理就是一张gif动图,repeat拉伸

css代码

#top-img {
            background: url(https://ae01.alicdn.com/kf/Ha812a6e7911445518b3b36a49968c52bf.gif);
            height:4px;
            top:0px;
            position: absolute;
            width:100%;
            Z-index:2468170656;
        }

html代码

<div id="top-img"></div>
  • 关于position: absolute;
  • 一般使用fixed绝对定位
  • 也可将div放置于body内的最上方随便使用定位
  • 如果顶部有其他元素,可以使用relative占位

一般页面效果

效果:点击查看