在scrollpane中设置背景颜色

Question

我使用setStyle（）方法在scrollpane中设置了背景颜色。以下代码在java版本之后的“jdk-8-ea-bin-b109”java版本中运行良好，这些推荐不能正常工作但是当鼠标悬停在颜色上时已经应用了。

我的代码是：

scrlPane.setStyle（ “ - FX-背景色：＃434547;”）;

Answer 1

我在JavaFX 8中创建的关于ScrollPane背景颜色的问题： ScrollPanes in JavaFX 8 always have gray background

您可能需要使用此CSS，以便ScrollPane样式可以实际工作：

.scroll-pane > .viewport {
   -fx-background-color: transparent;
}

Answer 2

尝试更改滚动窗格颜色

.scroll-bar:horizontal .thumb {
-fx-background-color:
    red,
    linear-gradient(to bottom, derive(red,95%), derive(red,10%)),
    linear-gradient(to bottom, derive(red,38%), derive(red,-16%));
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 0.5em; /* makes sure this remains circular */
}
.scroll-bar:vertical .thumb {
-fx-background-color:
    red,
    linear-gradient(to right, derive(red,95%), derive(red,10%)),
    linear-gradient(to right, derive(red,38%), derive(red,-16%));
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 0.5em; /* makes sure this remains circular */
}

它显示如下

这里是滚动窗格的全局css，用于进一步更改;

.scroll-bar:horizontal {
-fx-background-color:
    red,
    linear-gradient(to bottom, derive(red,30%) 5%, derive(red,-17%) 100%);
-fx-background-insets: 0, 1;
}
.scroll-bar:horizontal:focused {
-fx-background-color:
    -fx-focus-color,
    -fx-box-border,
    linear-gradient(to bottom, derive(red,30%) 5%, derive(red,-17%) 100%);
-fx-background-insets: -1.4, 0, 1;
}
.scroll-bar:vertical {
-fx-background-color:
    red,
    linear-gradient(to top, derive(red,30%) 5%, derive(red,-17%) 100%);
-fx-background-insets: 0, 1;
}
.scroll-bar:vertical:focused {
-fx-background-color:
    red,
    red,
    linear-gradient(to top, derive(red,30%) 5%, derive(red,-17%) 100%);
-fx-background-insets: -1.4, 0, 1;
}
.scroll-bar:horizontal .thumb {
-fx-background-color:
    red,
    linear-gradient(to bottom, derive(red,95%), derive(red,10%)),
    linear-gradient(to bottom, derive(red,38%), derive(red,-16%));
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 0.5em; /* makes sure this remains circular */
}
.scroll-bar:vertical .thumb {
-fx-background-color:
    red,
    linear-gradient(to right, derive(red,95%), derive(red,10%)),
    linear-gradient(to right, derive(red,38%), derive(red,-16%));
-fx-background-insets: 0, 1, 2;
-fx-background-radius: 0.5em; /* makes sure this remains circular */
}
.scroll-bar:focused .thumb {
-fx-color: -fx-focused-base;
}
.scroll-bar .thumb:hover {
-fx-color: -fx-hover-base;
}
/* Uncomment when RT-10521 is fixed.
.scroll-bar .thumb:pressed {
-fx-color: -fx-pressed-base;
}
*/
.scroll-bar:horizontal .track {
 -fx-background-color:
    -fx-box-border,
    linear-gradient(to bottom, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
-fx-background-insets:  0, 1;
-fx-background-radius: 0.5em; /* makes sure this remains circular */
}
.scroll-bar:horizontal .track-background {
 -fx-background-color:
    -fx-box-border,
    linear-gradient(to bottom, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
-fx-background-insets:  0, 1;
}
.scroll-bar:vertical .track {
 -fx-background-color:
    -fx-box-border,
    linear-gradient(to right, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
-fx-background-insets:  0, 1;
-fx-background-radius: 0.5em; /* makes sure this remains circular */
}
.scroll-bar:vertical .track-background {
 -fx-background-color:
    -fx-box-border,
    linear-gradient(to right, derive(-fx-color,-15%), derive(-fx-color,2.2%) 20%, derive(-fx-color,60%));
-fx-background-insets:  0, 1;
}
.scroll-bar .increment-button {
-fx-background-color:
    -fx-box-border,
    linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%));
-fx-background-insets:  0, 1;
-fx-padding: 0.25em; /* 3 */
}
.scroll-bar .decrement-button {
-fx-background-color:
    -fx-box-border,
    linear-gradient(to bottom, derive(-fx-color,30%) 5%, derive(-fx-color,-17%));
-fx-background-insets:  0, 1;
-fx-padding: 0.25em; /* 3 */
}
.scroll-bar:horizontal .increment-arrow {
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 1 0 -1 0, 0;
-fx-padding: 0.5em 0.333333em 0.0em 0.0em; /* 6 4 0 0 */
-fx-shape: "M 4 0 L 0 -3 L 0 3 z";
}
.scroll-bar:vertical .increment-arrow {
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 1 0 -1 0, 0;
-fx-padding: 0.333333em 0.5em 0.0em 0.0em; /* 4 6 0 0 */
-fx-shape: "M -3 0 L 0 4 L 3 0 z";
}
.scroll-bar:horizontal .decrement-arrow {
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 1 0 -1 0, 0;
-fx-padding: 0.5em 0.333333em 0.0em 0.0em; /* 6 4 0 0 */
-fx-shape: "M 0 0 L 4 -3 L 4 3 z";
}
.scroll-bar:vertical .decrement-arrow {
-fx-background-color: -fx-mark-highlight-color, -fx-mark-color;
-fx-background-insets: 1 0 -1 0, 0;
-fx-padding: 0.333333em 0.5em 0.0em 0.0em; /* 4 6 0 0 */
-fx-shape: "M -3 0 L 0 -4 L 3 0 z";
}
.scroll-bar:disabled {
-fx-opacity: -fx-disabled-opacity;
}