将背景图像设置为与 Java 应用程序中的窗口/屏幕大小相同

Set background image the same size as the window/screen in Java app

提问by Chris

I would like to set a background image the same size as my window/screen.

我想设置一个与我的窗口/屏幕大小相同的背景图像。

I would preferto do this in my CSSfile, but I have NOT FOUNDa way to accomplish this.

我更愿意在我的CSS文件中执行此操作，但我还没有找到完成此操作的方法。

Must I do this in a javafx class file?

我必须在 javafx 类文件中执行此操作吗？

Thanks for every help ;)

感谢您的每一个帮助；)

采纳答案by ItachiUchiha

You will have to determine the screen size in java codeas demonstrated in JavaFX window sizing, there is no way to determine it in CSS.

您必须在JavaFX 窗口大小中演示的Java 代码中确定屏幕大小，无法在 CSS 中确定它。

For an Image, in your java code you can use something as

对于图像，在您的 Java 代码中，您可以使用一些东西作为

ImageView imageView = new ImageView(image);
imageView.setFitWidth(Screen.getPrimary().getVisualBounds().getWidth());
imageView.setFitHeight(Screen.getPrimary().getVisualBounds().getHeight());

If you want to set the background image to a scene then:

如果要将背景图像设置为场景，则：

import javafx.application.Application;
import javafx.geometry.Rectangle2D;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.stage.*;

public class ScreenSizeImage extends Application {
    @Override public void start(final Stage stage) {
        // uncomment if you want the stage full screen.
        //stage.setFullScreen(true);

        Screen screen = Screen.getPrimary();
        Rectangle2D bounds = screen.getVisualBounds();

        stage.setX(bounds.getMinX());
        stage.setY(bounds.getMinY());
        stage.setWidth(bounds.getWidth());
        stage.setHeight(bounds.getHeight());

        StackPane root = new StackPane();
        root.setStyle(
            "-fx-background-image: url(" +
                "'http://icons.iconarchive.com/icons/iconka/meow/256/cat-box-icon.png'" +
            "); " +
            "-fx-background-size: cover;"
        );
        stage.setScene(new Scene(root));
        stage.show();
    }

    public static void main(String[] args) { launch(args); }
}

Of course, rather than the inline setStyle call you are best off using a separate CSS stylesheet like below:

当然，最好使用单独的 CSS 样式表，而不是内联 setStyle 调用，如下所示：

.root{
    -fx-background-image: url("background_image.jpg");
    -fx-background-size: cover;
}

回答by Flak DiNenno

Good question...

好问题...

• Firstly, I think you mean "the size of your app window" in your question. Obviously, you can't have a background image that is larger than your screen if you app window is smaller.

• Secondly, here's a snippet from the JavaFX CSS Reference Guide:

  http://download.java.net/jdk9/jfxdocs/javafx/scene/doc-files/cssref.html

  "...the background and border mechanisms are patterned after the CSS 3 draft backgrounds and borders module. See [4] for a detailed description."

     ...
  

  [4] CSS Backgrounds and Borders Module Level 3: http://www.w3.org/TR/css3-background/

  ---

  • You can use the JavaFX vendor specificCSS property -fx-background-sizewith the stretchvalue as long as your aspect ratio is correct/your dimensions are proportional.

  • You might also get it to work by trying a combination of autofor one dimension and 100%for another... and some combination of contain... depending on if you can live with a cropped image.

  • -fx-background-size<bg-size> [ , <bg-size> ]*

    <bg-size> = [ <size> | auto ]{1,2} | cover | contain | stretch

    A series of values separated by commas. Each bg-size item in the series applies to the corresponding image in the background-image series.

  • You can get more detailat http://www.w3.org/TR/css3-background/#the-background-image

• 首先，我认为您的问题是指“应用程序窗口的大小”。显然，如果应用程序窗口较小，则背景图像不能大于屏幕。

• 其次，这是JavaFX CSS 参考指南中的一个片段：

  http://download.java.net/jdk9/jfxdocs/javafx/scene/doc-files/cssref.html

  “...背景和边框机制是在 CSS 3 草稿背景和边框模块之后设计的。详细说明参见 [4]。”

     ...
  

  [4] CSS 背景和边框模块级别 3：http: //www.w3.org/TR/css3-background/

  ---

  • 只要您的纵横比正确/尺寸成比例，您就可以使用带有该值的 JavaFX供应商特定CSS 属性。 -fx-background-sizestretch

  • 您也可以通过尝试auto一个维度和100%另一个维度的组合来使其工作……以及……的某种组合，contain这取决于您是否可以忍受裁剪后的图像。

  • -fx-background-size<bg-size> [ , <bg-size> ]*

    <bg-size> = [ <size> | auto ]{1,2} | cover | contain | stretch

    以逗号分隔的一系列值。系列中的每个 bg-size 项目都适用于背景图像系列中的相应图像。

  • 您可以在http://www.w3.org/TR/css3-background/#the-background-image获得更多详细信息