11

こんにちは、JavaFx を使用してアプリケーションを作成しています。textField の右側に追加したい小さな png 画像があります。

textField のフレームに画像を追加することは問題ではありませんが、何らかの理由で画像をどの位置にも移動できません (つまり、開始位置から移動しないことを意味します - これは残っています)。

私のコードは次のとおりです。

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

センターでも試しましたが、それでもうまくいきませんでした。

4

3 に答える 3

16

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だけで参照します。
  • imagesb） cssを保持するディレクトリの下のディレクトリに画像ファイルを置き、url('images/pumpkin-icon.png');ORのように参照します
  • c) イメージ ファイルをimagesjar のルートにあるディレクトリに配置し、次のように参照します。url('/images/pumpkin-icon.png');

..親指定子を使用する相対参照は使用しないでください。たとえば../images/pumpkin-icon.png、ディスク ファイルには機能しますが、..指定子は有効な jar プロトコル パスではなく、jar からファイルを抽出しません。

于 2012-11-01T00:32:10.717 に答える
5

それ以外の

-fx-background-image-position:right;

使用する

-fx-background-position: right center;
于 2013-02-25T10:56:16.527 に答える
-6

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

がんばれ！

于 2012-10-31T13:49:34.583 に答える