JavaFX - 为不同TextArea的内容设置不同的背景

Question

我是 JavaFX 的新手。如何为不同的TextArea的内容设置不同的背景色。据我所知，使用 CSS，我可以像这样设置背景颜色

.text-area {
    -fx-background-color: transparent;
    -fx-text-box-border: gray;
}

.text-area .scroll-pane .content{
    -fx-background-color: transparent;
}

但它影响了两个 TextArea。

另外，JavaFX 中禁用的 TextArea 的背景颜色是什么，我该如何修改它？

TextArea textarea = new TextArea();
TextArea textarea1 = new TextArea();

这些是我应用的属性

 textarea1.setMaxHeight(180);
 textarea1.setMaxWidth(500);
 textarea.setEditable(false);
 textarea.setPrefRowCount(15);
 textarea.setWrapText(true);
 textarea.setStyle("-fx-background-color: transparent");
 textarea1.setStyle("-fx-background-color: tomato");

Answer 1

您可以在 CSS 中引入自定义变量来确定颜色。

当禁用 TextArea 时，TextArea 和子项的不透明度设置为 0.4 (=40%)。如果愿意，您可以通过覆盖样式表中的属性来撤消此操作。

.text-area {
    /* use variable as inner background */
    -fx-control-inner-background: content-background;
}

/* keep element fully opaque, when disabled */
.text-area:disabled,
.text-area *:disabled {
    -fx-opacity: 1;
}

/* replace inner background with darker color, when disabled */
.text-area:disabled {
    -fx-control-inner-background: derive(content-background, -40%);
}

// set content-background from inline style
textarea.setStyle("content-background: transparent;");
textarea1.setStyle("content-background: tomato;");

---

如果您不需要颜色来根据您选择的颜色(derive 部分)确定 -fx-control-inner-background，您也可以只需从内联样式分配属性。在这种情况下，您的样式表中不需要背景的 CSS 规则。

textarea.setStyle("-fx-control-inner-background: transparent;");
textarea1.setStyle("-fx-control-inner-background: tomato;");