2015-02-11 48 views
0

我想使用css文件为我的java场景添加背景。我试图实现的背景应该如下所示:http://lea.verou.me/css3patterns/#blueprint-gridJavaFx css背景不能正常显示

但是,我在屏幕上显示的是没有白线的蓝色背景。这是我如何落实到我的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-添加到每个行的开头,但是线性渐变是不可见的。

回答

2

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

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