GWT ImageResource доступен в свойстве CSS?

Подразумевается пример Google/GWT создания ImageResource:

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

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

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

Я понимаю, как использовать ImageResources и применять имена стилей, однако...

В моем приложении у меня есть несколько тем, которые применяются к различным виджетам с использованием css и отложенной привязки. Поэтому я определил правило css ('background'), которое я хотел бы использовать класс .myImage, но ничего не делает:

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

Каков синтаксис использования класса .myImage в свойствах css 'background'? Кажется, я должен указать класс .myImage в качестве аргумента для background-image.

Изменить: Проделали еще несколько исследований и нашли правильный синтаксис для этого, используя 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;
}

Ответы

Ответ 1

Если вы добавите "myImage" в качестве имени стиля для любого виджета, он установит фон этих виджетов...

Ответ 2

синтаксис для использования класса .myImage в свойстве css 'background'

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

Ответ 3

Я думаю, что правильный способ - определить @ImageOptions а остальные - определить в самом css-классе.

Для меня следующий код

Theme.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();
  }

}

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

Вы можете перезаписать любое желаемое свойство css после свойства gwt-image или с помощью ImageOptions.

Ответ 4

Вы можете использовать стиль, подобный этому myResources.css.myImage. Я имею в виду везде, где вы хотите использовать стиль в UiBinder, вы можете использовать его, используя свойство styleName с этим значением.

В вашем случае, когда вы применяете класс .myPanel, вы можете применить styleName='myResources.css.myImage' для применения фонового изображения.

Если вы хотите использовать это в java (т.е. без UiBinder) вы можете использовать это как

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

здесь виджет является объектом виджета, к которому вы хотите применить фон.

Я рекомендую вам взглянуть на это Объяснение, чтобы получить четкое понимание.