CSS：JQuery 日期选择器未显示图片

Question

我正在使用此处的日期选择器：https://jqueryui.com/datepicker/

我点击了那里的查看源代码，然后复制了代码。

下面三行：

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

我复制了scripts/css并保存在本地，然后我下载了平滑度模板，解压缩，将图像放在我服务器上的 /images 中，但箭头图像不显示，这是它的样子： http://postimg.org/image/bcnvipy61/

我是不是复制错地方了？（我不擅长CSS）

编辑（阅读以下评论后：

<link rel="stylesheet" href="css/jquery-ui.css">
    <script src="js/jquery-1.10.2.js"></script>
    <script src="js/jquery-ui.js"></script>

所以路径是：

css/
js/
images/

Answer 1

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

.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图标图像作为背景并更改背景位置。

例如：

.ui-icon-arrow-1-e { background-position: -32px -32px; }

找到合适的图标。

重点是第一部分中的路径是相对的，所以如果你 css 住在图像上方的目录中，它会很好用。

例如做这样的事情：

<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 文件以匹配您想要执行的操作即可。

例如更改为：

.ui-widget-content .ui-icon {
        background-image: url("/images/ui-icons_222222_256x240.png");
 }

或：

.ui-widget-content .ui-icon {
        background-image: url("../images/ui-icons_222222_256x240.png");
}

抱歉，可能有太多无关的信息，但我正在滚动...

CSS：JQuery 日期选择器未显示图片

CSS: Images not showing for JQuery datepicker

css

jquery

jquery-ui

datepicker