顶部滚动彩条

最后更新于 2020-04-17 717 次阅读

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

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占位

一般页面效果

效果：点击查看