Question

我正在处理的项目在CSS文件中有硬编码的URL，如下所示：

a.edit
{
    background: url(/TestSite/Images/Edit.png) no-repeat top left;
    display: inline-block;
    width: 16px;
    height: 16px;
    padding:1px;
    margin:1px;
    text-indent: -9999px; /* hides the link text */
}

当网站转移到生产网站时，这些链接会中断。我正在寻找一个解决方案，所以它只适用于网站运行的地方。

这就是我提出的并且它有效，但我想知道是否有更好的方法：

<script>
    $(document).ready(function () {
        $("a.edit").css('background', 'url(' + $("body").data("baseurl") + 'Images/Edit.png) no-repeat top left');
    });
</script>
<body data-baseurl="~/">...</body>

Answer 1

CSS处理相对于样式表所在位置的相对URL。利用它，不要在javascript中重写URL。

Answer 2

在生产和开发服务器上使用相同的文件夹结构。并使用相对路径

Answer 3

不要真正理解你面临的问题是什么。使用相对路径而不是绝对路径，无论托管服务提供商，您都可以...

不过，还有一件事需要考虑 - 如果客户关闭javascript怎么办？ ;）

Answer 4

relative URL怎么样？

a.edit
{
    background: url(Images/Edit.png) no-repeat top left;
    ...
}

CSS文件中的硬编码URL

4 个答案: