在scrollpane中設置背景顏色

Question

我使用setStyle（）方法在scrollpane中設置了背景顏色。下面的代碼在java版本之後的「java-8-ea-bin-b109」java版本中工作正常，但這些命令無法正常工作，但鼠標懸停在顏色上已經應用。

我的代碼是：

scrlPane.setStyle（ 「 - FX-背景色：＃434547;」）;

Answer 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 */ 
} 

它顯示一個如下

這裏作進一步修改滾動窗格中的全局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; 
} 

Answer 2

從一個問題，我的問候滾動窗格背景顏色在JavaFX的8創建： ScrollPanes in JavaFX 8 always have gray background

您可能需要使用CSS，使滾動窗格造型其實可以工作：

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