jQueryUI CSS 包含图像
我正在使用 jQuery UI 和 jQuery。我对 jQuery UI 文件进行了修改,以便所有图像都在 CSS 文件中进行 base64 编码。这是因为一项特殊要求,即所有图像和文件只能位于一个文件中。
例如:
.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABkCAYAAAD0ZHJ6AAAAeUlEQVRoge3OM
QHAIBAAsV/nh8J
DDfAkCjImpn5HvbfDpwIVoKVYCVYCVaClWAlWAlWgpVgJVgJVoKVYCVYCVaClWAlWAlWgpVgJVgJ
VoKVYCVYCVaClWAlWAlWgpVgJVgJVoKVYCVYCVaClWAlWAlWgpVgJVgJVhtqiwTEKTLXTgAAAABJ
RU5ErkJggg==
)
50% 50% repeat-x; color: #222222;
}
但是当我使用对话框时,CSS 未正确加载。例如,当我这样做时:
$("#dialog").dialog();
显示一个对话框,但不显示对话框标题和底部。
I am using jQuery UI and jQuery. I made a modification to the jQuery UI file so all the images are base64 incoded in the CSS File. This is because of a special requirement that all the images and files should be on only one file.
For example:
.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAABkCAYAAAD0ZHJ6AAAAeUlEQVRoge3OM
QHAIBAAsV/nh8J
DDfAkCjImpn5HvbfDpwIVoKVYCVYCVaClWAlWAlWgpVgJVgJVoKVYCVYCVaClWAlWAlWgpVgJVgJ
VoKVYCVYCVaClWAlWAlWgpVgJVgJVoKVYCVYCVaClWAlWAlWgpVgJVgJVhtqiwTEKTLXTgAAAABJ
RU5ErkJggg==
)
50% 50% repeat-x; color: #222222;
}
But when I use a dialog, the css isn't loaded correctly. For example, when I do:
$("#dialog").dialog();
a dialog is displayed but the dialog title and bottom don't appear.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
不确定您如何将背景图像转换为 base64,但在 此演示 中我编码的
.ui-widget-content
和.ui-widget-header
背景图像似乎在 Chrome 14 中工作正常。请注意,标题和底部有不同的背景图片(虽然我还没有完成这个演示的底部一个)。编辑:此处重复代码,以防 jsFiddle 消失:
HTML
JavaScript
注意:需要 jQuery 和 jQueryUI
CSS
Not sure how you converted the background image to base64 but in this demo in which I encoded the
.ui-widget-content
and.ui-widget-header
background image seems to work OK in Chrome 14. Note that the title and bottom have different background images (although I haven't done the bottom one for this demo).Edit: Code duplicated here in case jsFiddle ever disappears:
HTML
JavaScript
Note: requires jQuery and jQueryUI
CSS