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

样本输出：

如果我的 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;

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 标签上填充图片 url，然后使用这个样式表！：

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

祝朋友好运！