JavaFx css背景无法正常显示

时间:2015-02-11 13:59:16

标签: css interface background javafx gradient

我试图使用css文件为我的java场景添加背景。我试图实现的背景应如下所示:http://lea.verou.me/css3patterns/#blueprint-grid

然而,我进入屏幕的所有内容都是蓝色背景,没有白线。这是我在我的css文件中实现的方式:

.root {
    -fx-background-color:#269;
    -fx-background-image: linear-gradient(white 2px, transparent 2px),
      linear-gradient(90deg, white 2px, transparent 2px),
      linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
    -fx-background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
    -fx-background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}

正如您所看到的,我不得不在每行的开头添加-fx-,但线性渐变仍然不可见。

1 个答案:

答案 0 :(得分:2)

我不相信您可以使用linear-gradient作为-fx-background-image的值。相反,将一些-fx-background-color层叠在一起:

.root {
    -fx-background-color: #269,
        linear-gradient(from 0px 0px to 20px 0px, repeat, rgba(255, 255, 255, 0.3) 0%, transparent 5%, transparent 95%, rgba(255, 255, 255, 0.3) 100% ),
        linear-gradient(from 0px 0px to 0px 20px, repeat, rgba(255, 255, 255, 0.3) 0%, transparent 5%, transparent 95%, rgba(255, 255, 255, 0.3) 100% ),
        linear-gradient(from 0px 0px to 100px 0px, repeat, white 0%, transparent 1%, transparent 99%, white 100% ),
        linear-gradient(from 0px 0px to 0px 100px, repeat, white 0%, transparent 1%, transparent 99%, white 100% );
}