首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >CSS:不显示JQuery日期选择器的图像

问CSS:不显示JQuery日期选择器的图像
EN

Stack Overflow用户
提问于 2015-04-04 11:23:39
回答 1查看 13.6K关注 0票数 4

我在这里使用datepicker:https://jqueryui.com/datepicker/

我点击了查看源代码,然后复制了代码。

下面三行代码:

代码语言:javascript
复制
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

我复制了脚本/css并将它们保存在本地,然后我下载了平滑度模板,将其解压缩,将图像放在我的服务器上的/images中,但箭头图像不显示,如下所示:http://postimg.org/image/bcnvipy61/

我是不是把图片复制到了错误的地方或者什么地方?(我不擅长使用CSS)

编辑(阅读以下评论后:

代码语言:javascript
复制
<link rel="stylesheet" href="css/jquery-ui.css">
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery-ui.js"></script>

因此,路径是:

代码语言:javascript
复制
css/
js/
images/
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-04-04 13:33:49

jquery-ui.css文件的这一部分控制所有图标:

代码语言:javascript
复制
.ui-widget-content .ui-icon {
    background-image: url("images/ui-icons_222222_256x240.png");
}
.ui-widget-header .ui-icon {
    background-image: url("images/ui-icons_222222_256x240.png");
}
.ui-state-default .ui-icon {
    background-image: url("images/ui-icons_888888_256x240.png");
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
    background-image: url("images/ui-icons_454545_256x240.png");
}
.ui-state-active .ui-icon {
    background-image: url("images/ui-icons_454545_256x240.png");
}
.ui-state-highlight .ui-icon {
    background-image: url("images/ui-icons_2e83ff_256x240.png");
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
    background-image: url("images/ui-icons_cd0a0a_256x240.png");
}

它使用ui图标图像作为背景,并更改背景位置。

例如:

代码语言:javascript
复制
.ui-icon-arrow-1-e { background-position: -32px -32px; }

找到正确的图标。

重点是第一部分中的路径是相对的,所以如果您的css位于上面的图像目录中,那么它工作得很好。

例如,做这样的事情:

代码语言:javascript
复制
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>

但是,如果您希望它位于css目录、同级目录或其他地方,则必须提供指向站点中图像的绝对链接,或者向上跳过足够多的目录以指示在哪里可以找到该图像目录。因此,只需适当地更改jquery-ui.css文件以匹配您想要做的事情。

例如,更改为:

代码语言:javascript
复制
.ui-widget-content .ui-icon {
        background-image: url("/images/ui-icons_222222_256x240.png");
 }

或者:

代码语言:javascript
复制
.ui-widget-content .ui-icon {
        background-image: url("../images/ui-icons_222222_256x240.png");
}

抱歉,可能有太多无关紧要的信息了,但我很忙...

票数 8
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/29442383

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档