Question

我在usercontrol中有一个看起来像这样的表。然后在主页面上使用usercontrol。

<table>
  <tr> 
    <td width="80%" style="background-image: url(/images/Header_right.gif); background-repeat: repeat-x;">
    </td>
  </tr>
</table>

如果aspx页面位于其工作的站点的根目录中。但是如果aspx页面更深，则路径不再有效。（Default.aspx VS /Projects/Default.aspx）

还有另一种方法让图像像上面的表格一样重复吗？修复路径会很棒，但我的目标是让图像占据浏览器屏幕的其余部分。

注意：将网站移动到虚拟目录后出现此问题。

Answer 1

使用样式表

最好的方法是使用样式表而不是嵌入式样式。然后您不必担心控件的相对路径，因为路径将相对于样式表。

ResolveClientUrl（）

如果由于某种原因您无法使用样式表，则可以使用tilda（〜）解析相对于应用程序根目录的URL。 ASP.Net控件可以自动解决此问题，但在这种情况下，您需要自己调用ResolveClientUrl（）。

<table>
  <tr> 
    <td width="80%" style="background-image: url(<%= ResolveClientUrl(”~/images/Header_right.gif”) %>); background-repeat: repeat-x;">
    </td>
  </tr>
</table>

但实际上，最好的方法是使用样式表。

Answer 2

使用css类进行样式设置。所有类都放在单独的css文件中，并在母版页文件中引用它。然后路径到图像都始终相对于css的位置，并且你没有aspx页面位置的问题！

Answer 3

在CSS文件中定义一个类，该类引用相对于CSS文件的图像。将该类应用于要使用该类设置样式的特定元素。这有助于保持路径正确。

请注意，这假设您的CSS文件与图像位于同一目录树中，但是在兄弟目录中。

CSS

.header-bg
{
   background-image: url(../images/Header_right.gif);
   background-repeat: repeat-x;
}

标记

<link rel="stylesheet"
      type="text/css"
      href="~/Content/styles/site.css"
      ID="siteCss"
      runat="server" />

<table>
    <tr>
        <td width="80%" class="header-bg"></td>
    </tr>
</table>

虚拟目录中Master Page中的相对路径

3 个答案:

使用样式表

ResolveClientUrl（）