blocks|key|223410|text|如果您将"myImage“作为样式名称添加到任何小部件，它将设置这些小部件的背景...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|223411|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

If you add "myImage" as style name to any widget, it will set those widgets' background...

blocks|key|2874973|text|您可以像这样使用myResources.css.myImage样式。我的意思是，只要您想在UiBinder中使用样式，就可以通过使用带有此值的styleName属性来使用它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2874974|在您的示例中，无论您在何处应用类.myPanel，都可以应用styleName='myResources.css.myImage'来应用背景图像。|2874975|如果你想在java中使用它(也就是没有UiBinder)，你可以这样使用|2874976|MyResources+myResources+=+GWT.create(MyResources.class);
widget.setStyleName("myResources.css.myImage");|code-block|syntax|javascript|2874977|这里的小部件是要应用背景的小部件的对象。|2874978|我建议你看看这个Explanation，以便更清楚地理解。|2874979|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/4535094/how-do-i-use-image-sprites-in-gwt^0|8|N|1Z|9|0|G|8|U|Z|0|0|0|0|8|B|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]|$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1A|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1B|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1C|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|S|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

You can use the style like this <code>myResources.css.myImage</code>. I mean wherever you want to use the style in UiBinder you can use it by using the <code>styleName</code> property with this value.

In your case wherever you are applying the class <code>.myPanel</code>, you can apply the <code>styleName='myResources.css.myImage'</code>, to apply the background image.

If you want use this in java (i.e., Without UiBinder),
you can use like this

<pre><code>MyResources myResources = GWT.create(MyResources.class);
widget.setStyleName("myResources.css.myImage");
</code></pre>

here widget is the object of the Widget, to which you want to apply the Background.

I recommend you to look at this <a href="https://stackoverflow.com/questions/4535094/how-do-i-use-image-sprites-in-gwt">Explanation</a>, for clear understanding.

blocks|key|2874988|text|在'background‘css属性中使用.myImage类的语法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2874989|MyClientBundle+extends+ClientBundle+{

++++++++//Background+Image
++++++++@Source("resources/background.png")
++++++++DataResource+backgroundImage();
++++}|code-block|syntax|javascript|2874990|(mypanel.css)|2874991|@url+background+backgroundImage;

.myPanel+{
++++border-radius:+0px;
++++background-color:#ffffff;
++++opacity:0.6;
++++background-image:+background;
}|2874992|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

the syntax for using the .myImage class within the 'background' css property

<pre><code>MyClientBundle extends ClientBundle {

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

(mypanel.css)

<pre><code>@url background backgroundImage;

.myPanel {
 border-radius: 0px;
 background-color:#ffffff;
 opacity:0.6;
 background-image: background;
}
</code></pre>

blocks|key|2875006|text|我认为正确的方法是定义@ImageOptions，其余的在css-class本身中定义。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2875007|对于我来说，下面的代码|2875008|Theme.java|BOLD|2875009|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();
++}

}|code-block|syntax|javascript|2875010|theme.css|2875011|@sprite+.logo+{
++gwt-image:+"logo";
++background-size:+contain;
++background-attachment:+fixed;
}|2875012|生成以下输出：|2875013|.GLOMG3GI+{
++height:+344px;
++width:+633px;
++overflow:+hidden;
++background:url(data:image/png;base64,iV...=)+-0px+-0px+no-repeat;
++background-size:+contain;
++background-attachment:+fixed;
}|2875014|您可以在gwt-image属性之后覆盖任何css属性，也可以使用ImageOptions覆盖。|2875015|entityMap^0|B|D|0|0|0|A|0|0|0|9|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|15|8|@$9|16|A|17|B|J]]|D|@]|E|$]]|$1|K|3|L|5|M|7|18|8|@]|D|@]|E|$N|O]]|$1|P|3|Q|5|6|7|19|8|@$9|1A|A|1B|B|J]]|D|@]|E|$]]|$1|R|3|S|5|M|7|1C|8|@]|D|@]|E|$N|O]]|$1|T|3|U|5|6|7|1D|8|@]|D|@]|E|$]]|$1|V|3|W|5|M|7|1E|8|@]|D|@]|E|$N|O]]|$1|X|3|Y|5|6|7|1F|8|@]|D|@]|E|$]]|$1|Z|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|10|$]]

I think the correct way is to define <code>@ImageOptions</code> and the rest to define in the css-class itself.

For me the following code 

Theme.java

<pre><code>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();
 }

}
</code></pre>

theme.css

<pre><code>@sprite .logo {
 gwt-image: "logo";
 background-size: contain;
 background-attachment: fixed;
}
</code></pre>

produces this output:

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

You can overwrite any css property you want after the gwt-image property or by using ImageOptions.

The Google/GWT example of creating an ImageResource is understood:

<pre><code>interface MyResources extends ClientBundle {
 @Source("image.png")
 ImageResource image();

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

@sprite .myImage {
 gwt-image: 'image';
}
</code></pre>

I understand how to use ImageResources and apply style names, however... 

In my application, I have multiple themes that are applied to various widgets using CSS and deferred binding. So I have defined a CSS rule ('background') that I would like to use the .myImage class, but it does not do anything:

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

What is the syntax for using the .myImage class within the 'background' CSS property? It seems I should be able to specify the .myImage class as the argument for background-image.

Edit: Did some more research and found the correct syntax to do this using a DataResource.

<pre><code>MyClientBundle extends ClientBundle {

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

}
</code></pre>

(mypanel.css)

<pre><code>@url background backgroundImage;

.myPanel {
 border-radius: 0px;
 background-color:#ffffff;
 opacity:0.6;
 background-image: background;
}
</code></pre>

GWT ImageResource accessed within a CSS property?

下面是Google/GWT创建ImageResource的例子：interface MyResources extends ClientBundle {  @Source("image.png")  ImageResource image();  @Source("my.css");  CssResource css(...

问在CSS属性中访问GWT ImageResource？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在CSS属性中访问GWT ImageResource？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在CSS属性中访问GWT ImageResource？
EN