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

示例输出：

  

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

根据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协议路径，也不会从jar中提取文件。

Answer 2

而不是

-fx-background-image-position:right;

使用

-fx-background-position: right center;

Answer 3

复制此HTML并关注我：

<div class="textBoxWithImage">
  <img src="YOUR IMG URL" class="textBoxWithImage_img"/>
  <textarea id="textField"></textarea> // Change it with your textField !
</div>

在上面的img标签上填写图片网址，然后使用此样式表！：

.textBoxWithImage{
 position:relative;
 overflow:hidden;
}
.textBoxWithImage_img{
 position:absolute;
 top:0px;
 right:0px;
 z-index:1;
}
#textField{
 background:transparent;
 position:relative;
 top:0px;
 left:0px;
 z-index:2;
}

祝你好运的朋友！