下面是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
}
在'background‘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;
}
发布于 2014-02-20 03:30:11
如果您将"myImage“作为样式名称添加到任何小部件,它将设置这些小部件的背景...
发布于 2018-04-03 01:38:55
在'background‘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;
}
发布于 2019-05-02 22:53:44
我认为正确的方法是定义@ImageOptions
,其余的在css-class本身中定义。
对于我来说,下面的代码
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;
}
您可以在gwt-image属性之后覆盖任何css属性,也可以使用ImageOptions覆盖。
https://stackoverflow.com/questions/11209876
复制相似问题