css 按钮图片未结合 ID 和样式加载 class

Question

我正在将我的 Java 7 应用程序迁移到 Java 8 并注意到一个奇怪的行为。简述：

我在 FXML 中定义了一个按钮 style class button-red-big 和 id btnInput:

<Button id="btnInput" fx:id="btnInput" alignment="BOTTOM_RIGHT" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#handle_InputButton" prefHeight="100.0" prefWidth="100.0" styleClass="button-red-big" text="%experthome.button.input" textAlignment="CENTER" wrapText="true" />

当用户将鼠标移到红色按钮上时，它会变成白色。这是由 CSS 使用以下代码设置的：

.button-red-big {
    -fx-background-color: rgb(207,28,0);
    -fx-background-radius: 6, 5;
    -fx-background-insets: 0, 1;
    -fx-background-repeat: no-repeat;
    -fx-background-position: center center;
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.4) , 5, 0.0 , 0 , 1 );
    -fx-text-fill: #ffffff;
    -fx-font-size: 10pt;
    -fx-font-weight: bold;
}

.button-red-big:hover {
    -fx-background-color: #ffffff;
    -fx-text-fill: rgb(207,28,0);
}

.button-red-big:pressed {
    -fx-padding: 10 15 13 15;
    -fx-background-insets: 2 0 0 0,2 0 3 0, 2 0 4 0, 2 0 5 0;
}

为了让它更漂亮，我在那个按钮上添加了一张图片。当按钮处于正常状态时，按钮具有红色背景（如上文css所示）和白色图像。当按钮处于悬停状态时，它具有白色背景和红色图像。

图片由css根据按钮的id和styleclass应用像这样：

#btnInput .button-red-big {
    -fx-background-image: url("/src/img/Input_w.png"); //white image
}

#btnInput .button-red-big:hover {
    -fx-background-image: url("/src/img/Input_r.png"); //red image
}

这曾经在 Java 7 中完美运行。但是，在 Java 8 中，图像无法加载。现在，如果我直接在 .button-big-red 中添加 -fx-background-image 行，图像就会正常加载...但这不是理想的解决方案，因为我有不同的图像（链接到红色按钮），就像这样:

#btnAnalysis .button-red-big {
    -fx-background-image: url("/src/img/Analysis_w.png");
}

#btnAnalysis .button-red-big:hover {
    -fx-background-image: url("/src/img/Analysis_r.png");
}

#btnOutput .button-red-big {
    -fx-background-image: url("/src/img/Output_w.png");
}

#btnOutput .button-red-big:hover {
    -fx-background-image: url("/src/img/Output_r.png");
}

我希望我的解释有点清楚。任何可能导致此行为的想法？

Answer 1

您的select或不正确。

#btnAnalysis .button-red-big { ... }

将 select 具有 css class button-red-big 的节点是具有 id btnAnalysis.[=20 的节点的后代（在场景图中） =]

你可能只想要

#btnAnalysis { ... }

哪个 select 是具有 btnAnalysis id 的节点，或者

.button-red-big { ... }

哪些 selects 节点的样式为 class button-red-big，甚至

#btnAnalysis.button-red-big { ... }

(注意没有 space) selects 节点具有 both id btnAnalysis and 风格 class button-red-big.

css 按钮图片未结合 ID 和样式加载 class

css button image not loading in combination with id and style class

css

java

fxml

javafx-8