加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 编程开发 > Java > 正文

工具提示背景(使用JavaFX CSS)

发布时间:2020-12-15 05:11:59 所属栏目:Java 来源:网络整理
导读:简单的问题,但我无法在任何地方找到答案(我想我不知道到底要找什么……).如何防止我的工具提示显示一个丑陋的方块,场景的背景图像像 this picture一样背景?! 这是我的CSS,我相信按钮之类的一些选项正在影响工具提示……正如它们影响我在代码的另一部分中的
简单的问题,但我无法在任何地方找到答案(我想我不知道到底要找什么……).如何防止我的工具提示显示一个丑陋的方块,场景的背景图像像 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%,#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,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,0.2),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%,#8a8a8a 100%),linear-gradient(#2a2b2a 0%,#505250 50%,#606060 51%,#777777 100%);
    -fx-background-insets: 0,1);
    -fx-cursor:hand;
}

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

.text-area {
    -fx-background-color: rgba(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.7),6,2 );
}

解决方法

.root样式类将添加到所有场景的根节点.由于Tooltip有自己的场景,因此tooltip的根节点也有.root类,所以根据你的CSS,背景图像也应用于它.解决方案是为主场景的根添加一个独特的样式类

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

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

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读