Question

我试图为应用程序中的所有按钮设置背景图像，当我通过FXML文件设置它时工作正常但是当我使用CSS样式表来设置它时它不会工作，尽管其他一些属性在样式表中工作正常，如字体属性。

这是我的样式表代码：

@font-face {
    font-family: 'AdvertisingExtraBold';
    src: url('/fonts/AdvertisingExtraBold.ttf');
}
@font-face {
    font-family: 'Droid Arabic Kufi';
    src: url('/fonts/DroidKufi-Regular.ttf');
}
@font-face {
    font-family: 'Naskh';
    src: url('/fonts/droid-naskh.ttf');
}

.label {
    -fx-font-family: 'Kufi';
}

.button .text {
    -fx-font-family: 'AdvertisingExtraBold';    // This is working fine
    -fx-background-image: url('shutdown.png');  // This is not
    -fx-background-repeat: no-repeat;           // This is not
    -fx-background-size: 40;                    // This is not
}

但是当我在FXML文件中应用它时，它可以正常工作：

<Button  prefHeight="40.0" prefWidth="40" style="-fx-background-image: url('shutdown.png');-fx-background-repeat: no-repeat;-fx-background-size: 40;" />

它是相同的代码，为什么它不能从样式表中工作？

背景图片不是什么区别以及为什么字体属性有效？

我正在成功加载样式表：

scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());

Answer 1

Button有背景属性;它包含的Text节点没有。内联样式有效，因为您将规则应用于按钮。所以

.button .text{
    -fx-font-family: 'AdvertisingExtraBold';  
}
.button {
    -fx-background-image: url('shutdown.png');
    -fx-background-repeat: no-repeat;   
    -fx-background-size: 40;
}

会奏效。

Answer 2

尝试覆盖按钮样式时，请尝试在css文件中执行以下操作。

-fx-background-image: url('shutdown.png') !important; 
-fx-background-repeat: no-repeat !important;           
-fx-background-size: 40 !important;

背景属性不适用于样式表

2 个答案: