图片丢失答案

【问题标题】：Image is missing图片丢失
【发布时间】：2013-11-15 23:33:12
【问题描述】：

我在这里有一个“测试”数据库：

http://www.bayingwolf.com/addRecords.asp

如果您单击“添加记录”，则会弹出一个模式表单，并且在该表单的右上角应该有一个“X”的小 PNG 图像来关闭表单。

它应该看起来像这样：http://www.ericmmartin.com/projects/simplemodal-demos/（在“基本模式对话框”下单击“演示”），X 图像就位。

在下载中，作者在他的 index.html 页面上使用了以下内容：

<!-- preload the images --> 
<div style='display:none'>  
<img src='img/basic/x.png' alt='' />

我也做了同样的事情。当我在我的桌面上打开他的 index.html 页面时，我可以看到 X 图像（我无法在我的桌面上打开我自己的页面，因为它是一个 ASP 文件）但是，奇怪的是，当我将他的 index.html 文件上传到我的服务器我看不到图像。

我已经仔细检查了服务器路径，并且我的 X 图像位于一个名为“basic”的文件夹中，该文件夹位于另一个名为“img”的文件夹中。

控制图像定位的 CSS（在 basic.css 中）如下：

#simplemodal-container a.modalCloseImg {
    background: url(../img/basic/x.png) no-repeat; 
    width: 25px; 
    height: 29px; 
    display: inline; 
    z-index: 3200; 
    position: absolute; 
    top: -15px; 
    right: -16px; 
    cursor: pointer;
}

我的代码不是原始代码的复制品 - 我的页面上有一个表单，但这不会影响 X 图像的定位。

请有任何建议（我已经在这方面工作了至少两天！）？

谢谢

【问题讨论】：

在您的页面上只有一个空锚点：<a class="modalCloseImg simplemodal-close" title="Close"></a>，没有在 CSS 中设置背景 (background: none)。
也许如果你只为 ie6 添加 ie_css 那么它应该可以工作。

标签： jquery css image

【解决方案1】：

您在问题中提供的 CSS 不在您的 basic.css 样式表中。相反，你有这样的东西：

#simplemodal-container a {color:#ddd;} /* <-- bracket closed */


{background:url(x.png) no-repeat; /* <-- CSS parse error */
width:25px; 
height:29px; 
display:inline; 
z-index:3200; 
position:absolute; 
top:-15px; 
right:-16px; 
cursor:pointer;}

您可能不想在color 属性之后关闭这个大括号。所以清理你的 CSS 到这个：

#simplemodal-container a.modalCloseImg {
    color: #ddd;
    background: url(x.png) no-repeat;
    width: 25px; 
    height: 29px; 
    display: inline; 
    z-index: 3200; 
    position: absolute; 
    top: -15px; 
    right: -16px; 
    cursor: pointer;
}

【讨论】：

【解决方案2】：

经过一番挖掘，您的 css 有问题。这个 css 规则没有标签。您应该将 id 或类添加到此规则中。这可能无法解决所有问题，但这是朝着正确方向迈出的一步。

我只看了一眼，但我认为班级应该是.simplemodal-close

#simplemodal-container a {color:#ddd;}


{background:url(x.png) no-repeat; 
width:25px; 
height:29px; 
display:inline; 
z-index:3200; 
position:absolute; 
top:-15px; 
right:-16px; 
cursor:pointer;}


#simplemodal-container h3 {color:#84b8d9;}

应该是：

#simplemodal-container a {color:#ddd;}


.simplemodal-close {
   background:url(x.png) no-repeat; 
   width:25px; 
   height:29px; 
   display:inline; 
   z-index:3200; 
   position:absolute; 
   top:-15px; 
   right:-16px; 
   cursor:pointer;}


#simplemodal-container h3 {color:#84b8d9;}

编辑： 经过更多调查后，您的ie.css 也将覆盖basic.css 中的css。所以请确保您的ie.css 仅在 IE 中加载并且也是正确的。

此外，背景的 url 仍然不正确，它实际上是在 http://www.bayingwolf.com/css/x.png 中寻找它，所以你的路径应该是 ../x.png，例如：

.simplemodal-close {
    background:url(../x.png) no-repeat;
    ... /* rest of declarations */
}

【讨论】：