Question

我有这样的css文件

    .mask {
        display: none;
    }

    #mask.loading {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 1000;
            background-image: url('/icon.gif')
            background-position: center;
            background-repeat: no-repeat;
        }
    table.loading {
            opacity: .5;
}

我想在桌面加载之前显示图标，所以我称之为

$('#tableDisplay,#mask').addClass('loading');
$('#tableDisplay,#mask').removeClass('loading');

在我的html中，我添加了

<div id="mask"></div>
<table id="tableDisplay">
</table>

当我加载页面时，我可以看到表不透明，但我看不到图标，我的图标文件与css文件在同一个目录中

Answer 1

使用：

background-image: url('/icon.gif')

slash告诉它在web-root中查找图标...删除斜杠或给出完整路径IE

background-image: url('icon.gif')

background-image: url('/your/path/to/css/icon.gif')

当您查看控制台并查看404图标时，这也应该很明显，您将看到CSS文件所在的目录＆＃34;尝试＆＃34;在

中查找icon.gif

Answer 2

您的第一个CSS规则有一个类选择器，但它应该是一个ID：

#mask {  /* instead of .mask */
    display: none;
}

如果图标位于同一目录中，您的图标网址包含一个不应该出现的斜杠：

background-image: url('icon.gif');

页面加载图标从css没有显示

2 个答案: