用于语言标志的 HTML img 与 CSS 背景图像答案

【问题标题】：HTML img vs CSS backround-image for language flags用于语言标志的 HTML img 与 CSS 背景图像
【发布时间】：2012-09-30 01:44:14
【问题描述】：

我正在建立一个网站，但由于我更像是一名程序员，我不太清楚如何在使用 HTML <img> 标记或使用 CSS（背景图像）之间做出决定：

用户需要能够切换语言。为此，将带有适当链接的语言标志放入网站的页脚（由于页面太小，页脚将始终可见，并且没有真正将它们放在顶部某处的好地方）。

链接实际上是指服务器上的其他页面，它不是某种会改变的会话变量，因为我正在使用一个简单的 CMS。

我发现 an excellent question 在这里描述了大多数场景，但我不确定这个。

一位更有经验的网页设计师甚至将我的徽标更改为 CSS 图像，因为它包含一个指向主页的锚点和一个 H1 元素，该元素不应该是可见的，但可以被屏幕阅读器“找到”（我无法设置 @987654324 @ 但他使用了text-indent 和高价值）。我怀疑他的解决方案，但我想我可能会改回我的做法。

【问题讨论】：

旁注，听起来您的网页设计师正在使用“图像替换”技术的变体。这是一种受鼓励的常用方法。您也可以使用 CSS 类来更改标志。
@VKen 你能详细说明一下吗？我看不出他的所作所为比普通的<img> 更令人鼓舞
有一个现代的Web开发概念，将内容与表示分离。这个想法是 html 标记本身足以描绘网页的内容。任何美学和格式都将被分离并包含在样式表中。如果以后有任何视觉更改，您不需要编辑基本 html，而只需编辑样式表。维基百科上有一些关于concept 的信息
@VKen 我很清楚这个概念，我怀疑你应该称之为“现代”，因为我相信这种方式已经存在很长时间了。应用程序编程具有相同的概念，即 MVC 模式。就像我的问题一样，决定什么去哪里并不总是那么容易。
我听到了，完全正确。总是很难区分元素是属于内容还是属于表现形式。我通常用于图像的简单测试用例是，文档是否可以在没有图像的情况下处理文本（关闭 css 样式），是否是内容。请原谅我的啰嗦，例如在 HTML 内容中，language: US English 是否足够清晰？如果是，则图像是附加呈现。这是肯定的，没有一种方法可以解决。

标签： html css background-image image

【解决方案1】：

如果它是可点击的链接，请将其保留为 <img>，并带有适当的 alt 文本。如果它是某个文本旁边的图标，请将标志设置为该链接的background-image，并带有no-repeat 和适当的左填充。

【讨论】：

【解决方案2】：

使用 css 的好处 |背景图像：/image/path.png； |方法，就是如果以后你需要改变图片，特别是图片路径。您只需要在 CSS 样式表中进行更改。这可以节省大量时间。

如果您选择使用 HTML | |方法，稍后需要更改图像（*）或图像路径，您需要对每个页面进行更改。除非您使用的 CMS 或类似平台在任何地方都使用相同的实例。或者，您需要进行全面更改，只要它保持相同的图像路径和图像名称，您就可以用新图像覆盖图像。但是，如果您需要更改路径或图像名称，则需要在任何地方进行更改。

【讨论】：

我不知道现在谁开发的网站只是为每个页面使用复制粘贴的 HTML。如果这样做，那通常适用于永远不会改变的静态网站。由于这是一种不好的做法，我认为它在某种程度上使您的论点无效。我的问题还表明我使用的是 CMS。请注意，对于静态网站，例如 Dreamweaver 具有内置模板，因此页面的共享部分始终从一个位置进行管理。