使用CSS在textField的右侧添加一张小图片

Question

你好我正在使用JavaFx来创建一个应用程序.我有一个小的png图片,我想添加到我的textField的右侧.

将图片添加到textField的框架并不是一个问题但由于某种原因我不能将图片移动到任何可能的位置(这意味着它不会从开始的位置移动 - 这是剩下的)

我的代码如下:

#textField {
    -fx-background-image:url('apr.png');
    -fx-background-repeat: no-repeat;
    -fx-background-image-position:right;
}

我也尝试过中心,但也没用.

Answer 1

正如Marek在他的回答中指出的那样,你有css属性id错误,你需要使用 -fx-background-position: right center;

这是一个简短的示例,演示如何使用CSS将图片添加到TextField的右侧:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class TextFieldCssSample extends Application {
  @Override public void start(Stage stage) throws Exception {
    TextField textField = new TextField();
    textField.setId("textField");
    StackPane layout = new StackPane();
    layout.getChildren().addAll(textField);
    layout.getStylesheets().add(this.getClass().getResource("textfield.css").toExternalForm());
    stage.setScene(new Scene(layout));
    stage.show();
  }
  public static void main(String[] args) { launch(args); }
}

Css文件:

/* textfield.css 
   place in same location as TextFieldCssSample.java and ensure build system copies it to output directory
   image used courtesy of creative commons attribution license: http://www.rockettheme.com/blog/design/1658-free-halloween-icon-pack1
*/
.root {
  -fx-padding: 15; 
  -fx-background-color: cornsilk;
}

#textField {
  -fx-background-image:url('http://icons.iconarchive.com/icons/rockettheme/halloween/32/pumpkin-icon.png');
  -fx-background-repeat: no-repeat;
  -fx-background-position: right center;
  -fx-font-size: 20;
}

样本输出:

如果我的png图像是我的jar文件中的本地文件,我将如何访问或引用它？

根据css参考的uri部分:

"地址可以是绝对的URI ......或相对于CSS文件的位置."

例如

• a)将css和图像文件放在jar文件中的相同位置,并使用url('pumpkin-icon.png');OR进行引用
• b)将图像文件放在images保存css 的目录下的目录中,并像url('images/pumpkin-icon.png');OR 一样引用
• c)将图像文件放在imagesjar的根目录下,并引用如下url('/images/pumpkin-icon.png');

不要使用使用..父指定符的相对引用,例如../images/pumpkin-icon.png,虽然它适用于磁盘文件,但..说明符不是有效的jar协议路径,也不会从jar中提取文件.

Answer 2

代替

-fx-background-image-position:right;

使用

-fx-background-position: right center;