Question

是否可以为不同的浏览器区域设置提供不同的图像源？图像存储在localy中。一个用于英语，另一个用于德语。所以，如果我用德语启动浏览器，它必须显示德语图像。英语也一样。

Answer 1

您可以通过以下方式检测浏览器语言：

var language = window.navigator.userLanguage || window.navigator.language;
alert(language);

现在，您可以检查language的值，该值可以指示从哪里读取图像。

另一种选择是在图像前加上语言，例如： en-USMyPic.jpg，然后，通过JS，阅读图像。

Answer 2

使用:lang()伪类选择器。让图片来源与lang属性相关联。

:lang(en) {
  background-image: url('http://placehold.it/200x200');
  width: 200px;
  height: 200px;
}
:lang(de) {
  background-image: url('http://placehold.it/300x300');
  width: 300px;
  height: 300px;
}

<div lang="en">For English users</div>
<div lang="de">For German Users</div>

Answer 3

Manoj的回答并没有完全回答这个问题。但略微调整可以使其发挥作用。

您的典型标记看起来像这样，lang标记上定义了<html>属性：

<html lang="en">
...
   <div class="lang-specific"></div>
...
</html>

CSS类似于：

:lang(en) .lang-specific {
   /* English styles here */
}

:lang(de) .lang-specific {
   /* German styles here */
}

不同区域的不同图像源

3 个答案: