在css中本地化图像路径

时间:2011-05-16 17:41:08

标签: javascript jquery asp.net css localization

我目前正致力于本地化我的应用程序,该应用程序基于.net框架v3.5,它使用jquery客户端库。

我成功地将我的大部分应用程序本地化,通过资源文件在屏幕文本上,通过资源javascript文件在客户端文本中进行本地化,并通过.net c#代码将html标记为图像。

在本地化我的图像时,简单的更改是更新图像的路径以包含culture文件夹,例如。对于english - en,spanish - es等,所以样本图像路径将是

/image/folder1/en/image.gif

/image/folder2/es/image.gif

我已经在我的.net代码中实现了这一点,一切正常。

但是我遇到了一个问题。我的一些图像是用CSS设置的背景图像。不幸的是,这引发了一个问题,因为我无法本地化这样的事情:

h1 {background-image:url("../../Images/folder1/<<culture>>/image1.gif");background-repeat:no-repeat;

所以我正在寻找建议,因为我可以解决这个问题。我可以将javascript变量值传递给css文件吗?我可以在渲染之前创建一个httphandler并更新我的css,但是我更愿意使用它作为最后的手段,因为我不想通过iis处理每个css文件。

任何提示都会很棒。

5 个答案:

答案 0 :(得分:5)

另一种可能性是为正文(或您感兴趣的HTML元素)设置lang属性,以便呈现的HTML页面将显示如下内容:

<body lang="es">
  <h1>...</h1>

然后您可以使用CSS lang伪选择器来本地化内容:

h1:lang(es) {background-image:url("../../Images/folder1/es/image1.gif");}
h1:lang(en) {background-image:url("../../Images/folder1/en/image1.gif");}

这是本地化CSS文件的标准(如W3C推荐的那样)。

答案 1 :(得分:2)

一个简单的解决方案是为每个只包含修改过的图像路径的语言创建另一个css文件,然后在主css之后加载它。

答案 2 :(得分:0)

如果您的BG图片元素不是太多,您可以将这些元素class names和硬编码语言参考。例如

h1.engish {background-image:url("../../Images/folder1/en/image1.gif")...; 
h1.spanish {background-image:url("../../Images/folder1/es/image1.gif")...;  

答案 3 :(得分:0)

除非您动态生成CSS文件,否则无法将变量传递给它。

但是,您可以通过将背景图像路径包装在标记中来将其置于内联。

答案 4 :(得分:0)

您可以动态生成CSS

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

然后在sitecss.aspx中,你可以像在代码中那样做:

h1 {background-image:url("../../Images/folder1/<%= culture %>/image1.gif");}

在调用文件时使用其他参数以防止文化之间的缓存:

<link href="sitecss.aspx?culture=<%= culture %>&ver=<%= siteversion %>" type="text/css" rel="stylesheet" />