Question

简单的问题，但我无法在任何地方找到答案（我想我不知道到底要找什么......）。如何防止我的工具提示显示一个丑陋的正方形，并将场景的背景图像显示为this picture中的背景？！

这是我的CSS，我相信按钮之类的一些选项正在影响工具提示......正如它们影响我在代码的另一部分中的Datepickers。如何管理它们不会产生这种附带效应？只是为特定对象定义一个CSS，比如DatePicker或Tooltip就可以了吗？

我正在使用JDK 8u11，MAC OS Mavericks。

.root {
     -fx-background-image: url("media/background.jpg");
}

.button {
    -fx-background-color: 
        linear-gradient(#686868 0%, #232723 25%, #373837 75%, #757575 100%),
        linear-gradient(#020b02, #3a3a3a),
        linear-gradient(#9d9e9d 0%, #6b6a6b 20%, #343534 80%, #242424 100%),
        linear-gradient(#8a8a8a 0%, #6b6a6b 20%, #343534 80%, #262626 100%),
        linear-gradient(#777777 0%, #606060 50%, #505250 51%, #2a2b2a 100%);
    -fx-background-insets: 0,1,4,5,6;
    -fx-background-radius: 9,8,5,4,3;
    -fx-padding: 15 30 15 30;
    -fx-font-family: "Arial Black";
    -fx-font-size: 18px;
    -fx-font-weight: bold;
    -fx-text-fill: white;
    -fx-effect: dropshadow( three-pass-box , rgba(255,255,255,0.2) , 1, 0.0 , 0 , 1);
}

.button:hover {
    -fx-background-color: 
        linear-gradient(#757575 0%, #373837 25%, #232723 75%, #686868 100%),
        linear-gradient(#3a3a3a, #020b02),
        linear-gradient(#242424 0%, #343534 20%, #6b6a6b 80%, #9d9e9d 100%),
        linear-gradient(#262626 0%, #343534 20%, #6b6a6b 80%, #8a8a8a 100%),
        linear-gradient(#2a2b2a 0%, #505250 50%, #606060 51%, #777777 100%);
    -fx-background-insets: 0,1,4,5,6;
    -fx-background-radius: 9,8,5,4,3;
    -fx-padding: 15 30 15 30;
    -fx-font-family: "Arial Black";
    -fx-font-size: 18px;
    -fx-font-weight: bold;
    -fx-text-fill: white;
    -fx-effect: dropshadow( three-pass-box , rgba(255,255,255,0.2) , 1, 0.0 , 0 , 1);
    -fx-cursor:hand;
}

.text-area *.text {
    -fx-text-alignment: justify;
}

.text-area {
    -fx-background-color: rgba(255,255,255,0.4);
}

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

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


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

.radio-button{
    -fx-font-size: 14px;
   -fx-font-family: "Arial Black";
   -fx-fill: #818181;
   -fx-effect: innershadow( three-pass-box , rgba(0,0,0,0.7) , 6, 0.0 , 0 , 2 );
}

Answer 1

根据Java 8 modena.css样式表，这是Tooltip的标准样式。

.tooltip {
    -fx-background: rgba(30,30,30);
    -fx-text-fill: white;
    -fx-background-color: rgba(30,30,30,0.8);
    -fx-background-radius: 6px;
    -fx-background-insets: 0;
    -fx-padding: 0.667em 0.75em 0.667em 0.75em; /* 10px */
    -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.5) , 10, 0.0 , 0 , 3 );
    -fx-font-size: 0.85em;
}

您可以按照自己的意愿修改它。有关这样做的信息在Oracle CSS reference guide和CSS tutorial。

中

Answer 2

.root样式类被添加到所有场景的根节点。由于Tooltip具有自己的场景，因此工具提示的根节点也具有.root类，因此根据您的CSS，背景图像也会应用于它。解决方案是为主场景的根

添加一个独特的样式类

scene.getRoot().getStyleClass().add("main-root");

并指定此不同样式类的背景图像

.main-root {
    -fx-background-image: url("media/background.jpg");
}

工具提示背景（使用JavaFX CSS）

2 个答案: