css - JavaFx css 背景显示不正确

Question

我正在尝试使用 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- 添加到每一行的开头，但线性渐变仍然不可见。

Answer 1

我认为您不能使用 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% );
}