css滚动条背景样式透明

/* 字体 and 滚动条 宽度 */ ::-webkit-scrollbar { width: 8px; height: 8px; } /* 整个滚动条的轨道 */ ::-webkit-scrollbar-track { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); background-color: transparent; /* 背景设置为透明 */ } /* 滑块 */ ::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: rgba(0, 0, 0, 0.3); /* 颜色 */ }

CSS滚动条是一种使页面更美观及交互性得增强的方式。

其中，滚动条的背景样式，我们也可以使用CSS进行定制，而且还可以让背景透明。

/* 整个滚动条的轨道 */
::-webkit-scrollbar-track {
background-color: transparent;
}

如上所示，使用 ::-webkit-scrollbar-track 来选择滚动条的轨道部分，并且将背景颜色设置成了 transparent （透明）。

另外，如果想要改变滑块的颜色，则可以使用 ::-webkit-scrollbar-thumb 选择器，具体代码如下：

/* 滑块 */
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.3);
}

以上代码将滑块的颜色设置为了带有70%透明度的黑色。

这样定制出来的滚动条，外观更加简约，而且值得一提的是，它可以适用不同的浏览器。

查看更多关于css滚动条背景样式透明的详细内容...