html - CSS中,如何使 background 图像和渐变 background 颜色工作在一个选择器上?

  显示原文与译文双语对照的内容

我正在尝试在 webkit 中样式滚动条,下面是代码:


::-webkit-scrollbar-thumb {
 background-color: -webkit-linear-gradient(left, #424242 1%,#383838 100%);
 -webkit-border-radius: 3px;
}

现在,除了使这个滚动条有圆角和渐变,我还想把小点放在它的中间。 问题是,如果我添加了这些属性:


background-image: url("../images/scrollbar_dots.png");
background-position: center;
background-repeat: no-repeat;

浏览器开始忽略以前的内容,我的滚动条变得透明。 显然,不能只将一个 div inside 放入一个,因为一个滚动条是一个伪元素。 如何使它工作? ( Javascript会做到,但我甚至不知道如何从DOM获取滚动条) 。

时间: 作者:

使用逗号分隔它们,因为渐变只是 background 图像,所以你可以使用多个 background 图像来使用逗号分隔它们。


background: url(#), YOUR_GRADIENT_CODE_HERE;
 ----^----

示范

作者:
...