JavaFx css 背景未正确显示答案

【问题标题】：JavaFx css background not showing properlyJavaFx css 背景未正确显示
【发布时间】：2015-02-11 13:59:15
【问题描述】：

我正在尝试使用 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-，但线性渐变仍然不可见。

【问题讨论】：

标签： css interface background javafx gradient

【解决方案1】：

我不相信您可以使用linear-gradient 作为-fx-background-image 的值。相反，将一些-fx-background-colors 叠加在一起：

.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% );
}

【讨论】：