36

Google/GWT 创建 ImageResource 的例子理解：

interface MyResources extends ClientBundle {
  @Source("image.png")
  ImageResource image();

  @Source("my.css");
  CssResource css();
}

@sprite .myImage {
  gwt-image: 'image';
}

我了解如何使用 ImageResources 和应用样式名称，但是......

在我的应用程序中，我有多个主题，它们使用 CSS 和延迟绑定应用于各种小部件。所以我定义了一个我想使用 .myImage 类的 CSS 规则（“背景”），但它没有做任何事情：

background {
    background-attachment: fixed;
    background-image: .myImage;  //??  This is the question!
    background-size: contain
}

在“背景”CSS 属性中使用 .myImage 类的语法是什么？看来我应该能够将 .myImage 类指定为背景图像的参数。

编辑：做了一些更多的研究，并找到了使用 DataResource 执行此操作的正确语法。

MyClientBundle extends ClientBundle {

    //Background Image
    @Source("resources/background.png")
    DataResource backgroundImage();

}

(mypanel.css)

@url background backgroundImage;

.myPanel {
    border-radius: 0px;
    background-color:#ffffff;
    opacity:0.6;
    background-image: background;
}
4

4 回答 4

1

如果您将“myImage”作为样式名称添加到任何小部件，它将设置这些小部件的背景...

于 2014-02-19T19:30:10.670 回答
1

在“背景”css 属性中使用 .myImage 类的语法

MyClientBundle extends ClientBundle {

        //Background Image
        @Source("resources/background.png")
        DataResource backgroundImage();
    }

(mypanel.css)

@url background backgroundImage;

.myPanel {
    border-radius: 0px;
    background-color:#ffffff;
    opacity:0.6;
    background-image: background;
}
于 2018-04-02T17:38:55.110 回答
1

我认为正确的方法是@ImageOptions在 css-class 本身中定义和其余的定义。

对我来说，下面的代码

主题.java

public interface Theme extends ClientBundle {

  @ImageOptions(repeatStyle = RepeatStyle.None, preventInlining = true)
  @Source("path/logo.png")
  ImageResource logo();

  @Source("theme.css")
  ThemeCss css();

  interface ThemeCss extends CssResource {
      String logo();
  }

}

主题.css

@sprite .logo {
  gwt-image: "logo";
  background-size: contain;
  background-attachment: fixed;
}

产生这个输出：

.GLOMG3GI {
  height: 344px;
  width: 633px;
  overflow: hidden;
  background:url(data:image/png;base64,iV...=) -0px -0px no-repeat;
  background-size: contain;
  background-attachment: fixed;
}

您可以在 gwt-image 属性之后或使用 ImageOptions 覆盖所需的任何 css 属性。

于 2019-05-02T14:53:43.753 回答
-1

您可以使用这样的样式myResources.css.myImage。我的意思是无论你想在 UiBinder 中使用样式的任何地方，都可以通过使用styleName具有此值的属性来使用它。

在您的情况下，无论您在哪里应用 class .myPanel，都可以应用styleName='myResources.css.myImage', 来应用背景图像。

如果你想在java中使用它（即没有UiBinder），你可以像这样使用

MyResources myResources = GWT.create(MyResources.class);
widget.setStyleName("myResources.css.myImage");

这里的小部件是小部件的对象，您要对其应用背景。

我建议你看一下这个解释，以便清楚地理解。

于 2014-02-20T09:17:01.940 回答