母版页上的 CSS 和图像答案

【问题标题】：CSS and images on Master Page母版页上的 CSS 和图像
【发布时间】：2009-10-13 19:54:36
【问题描述】：

我遇到了这个非常流行的问题，但未能找到有效的解决方案。

基本上，我使用的是母版页 (/Masterpages/Default.master)，其中包括

<link href="../css/style.css" rel="stylesheet" type="text/css />

它还包括一些具有相同相对链接的图像。

但是当我将母版页应用于内容页面（在不同的文件夹级别中）时，css 格式和图像会丢失。

有没有办法动态解决文件夹级链接到 css 和图像到所有使用母版页的内容页面？

提前致谢

更新：

还有一个问题。让输出在浏览器和 Visual Studio 的设计视图中正确呈现是很棘手的。

我通过对母版页中的图像使用 asp:image 解决方案并通过在母版页中双重链接 css 来使其工作，以使其呈现在 VS 和一个使其正确呈现浏览网站。

<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href="<%=ResolveUrl("~/css/style.css")%>" rel="stylesheet" type="text/css" />

【问题讨论】：

【解决方案1】：

最好用：

<link href="<%=ResolveUrl("~/css/style.css") %>" rel="stylesheet" type="text/css />

因为这将与 iis 应用程序根不同：

<link href="/css/style.css" rel="stylesheet" type="text/css />

【讨论】：

【解决方案2】：

您可以使您的链接 runat="server" 并使用波浪号映射使 CSS 路径相对于站点根目录。

<link runat="server" id="siteStyle"
      href="~/css/style.css"
      rel="stylesheet"
      type="text/css" />

CSS 中引用的图像应与 CSS 文件的位置相关，并且在正确包含 CSS 文件本身后应正常解析。对于页面上标签中的图像，您需要使用 ASP:Image 控件，并且再次使用波浪号映射作为相对于根的路径。

【讨论】：

【解决方案3】：

相当肯定这会起作用

<link href="/css/style.css" rel="stylesheet" type="text/css />

/ 将您带到站点的根目录

【讨论】：

【解决方案4】：

您可以使用 波浪号 让链接在任何地方都能正常工作。这也适用于图像。

<link runat="server" href="~/css/style.css" rel="stylesheet" type="text/css />

【讨论】：

【解决方案5】：

CSS 中的图像与引用它们的文件相关。

（其中一个例外是 Internet Explorer 中用于修复 PNG 的“过滤器”规则。在这种情况下，图像与 HTML 文档相关。）

【讨论】：

【解决方案6】：

是的，问题是母版页正在使用相对 url 来加载 CSS：

"../css/style.css"

您需要将其更改为站点根目录（取决于您的 css 文件的位置），例如：

"/css/style.css"

比所有不同的文件夹级别都可以使用相同的 url。

【讨论】：

【解决方案7】：

实际上，母版页会自动为您重新设置 css 文件的基础，而无需您添加 runat="server"。确保您的 css 文件位于您指定的文件夹中的下一个目录。

您可以使用 css 文件的绝对路径，但是当您这样做时，Visual Studio 似乎不会在设计视图中呈现样式。此外，有时您不知道是否要在虚拟目录中运行，因此使用绝对路径并不总是理想的。

此外，使用来自 css 文件本身的图像资产的相对链接 - 无论您如何链接到样式表，这都将起作用。

【讨论】：

【解决方案8】：

您可能还对研究主题和皮肤感兴趣。

【讨论】：