css - 用CSS在textField右侧添加小图片

Question

您好，我正在使用 JavaFx 制作应用程序。我有一个小的 png 图片，我想添加到我的 textField 的右侧。

将图片添加到 textField 的框架中不是问题，但由于某种原因我无法将图片移动到任何位置(这意味着它不会从起始位置移动 - 这是左边)

我的代码如下:

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

我也尝试过使用 Center，但也没有用。

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;
}

示例输出:

If my png image is a local file in my jar file, how will I access or refer to it?

根据uri section of the css reference :

“地址可以是绝对 URI ……或相对于 CSS 文件的位置。”

例如

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

不要使用使用 .. 父说明符的相对引用，例如../images/pumpkin-icon.png 因为，虽然它适用于磁盘文件，但 .. 说明符不是有效的 jar 协议(protocol)路径，并且不会提取从一个 jar 里的文件。