提示框背景（使用JavaFX CSS）

Question

简单的问题，但我找不到任何答案（我想我不知道该搜索什么...）。我如何防止我的工具提示显示一个丑陋的正方形，并将场景的背景图像作为背景，就像这张图片一样？！

这是我的CSS，我相信其中一些选项，例如按钮，正在影响工具提示...就像它们在代码的另一部分中影响我的日期选择器一样。我如何管理它们，使其没有这种副作用？是否简单地为特定对象（例如DatePicker或Tooltip）定义CSS就可以解决问题？

我正在使用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 );
}

- Alexis R Devitre

---

这很奇怪。也许你用来为其他节点设置样式的某些CSS也意外地应用到了工具提示上？ - Tomas Mikula

是的，我想是这样...我应该发布我的CSS文件吗？它非常简短... - Alexis R Devitre

我刚刚编辑并发布了CSS，请看一下。 - Alexis R Devitre

只是出于好奇...是否有一种方法可以在添加样式之前删除所有样式...以确保不会有任何干扰？ - Alexis R Devitre

我不知道有这样的事情。当您使用 node.setStyle("-fx-fill: red;") 以编程方式设置样式时，随后的 setStyle 将覆盖先前的值，但不会清除外部样式表设置的样式。 - Tomas Mikula

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参考指南和CSS教程。

- jewelsea

---

我将这段代码添加到了我的CSS中...但是Tooltip似乎仍然保留了场景的背景和主按钮的格式，没有任何效果。 - Alexis R Devitre

在你的问题中放置一个 mcve，使别人可以运行它，但只包含复制你的问题所需的代码。此外，在你的问题中添加完整的环境信息（Java 运行时版本和操作系统）。 - jewelsea

Answer 2

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

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

并为这个独特的样式类指定背景图像

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

- Tomas Mikula