1

我是一个新手，现在正在研究使用背景而不是前景图像，这是一种常见的做法。

我查看了使用的技术，并看到：

  • 您通常需要明确说明图像的尺寸（并将前景元素设置为这些尺寸）
  • 您需要使用 css 技巧使前景元素以某种方式消失。这一切看起来真的很骇人听闻。所以，我想知道，到底为什么要做这一切而不是仅仅使用原生元素呢？我相信有一个很好的答案

（我确实经历了这个When to use IMG vs. CSS background-image?，但无法找到明确的答案）

4

4 回答 4

3

将 CSS 用于图像的一个好处是，您可以使用一个 http 请求加载所有设计图像（用于 UI 元素的图像等），而不是使用 sprite 对每个单独的图像进行 http 请求。一张包含所有图像网格的大图像。

如前所述，内容图像应使用 img 标签，这也有助于人们在访问您的网站/应用程序时使用各种可访问性选项。例如，如果他们正在使用屏幕阅读器，屏幕阅读器知道它是一个图像，并且可以读取 img alt 名称或标题，但如果它只是一个带有背景图像的 div，他们什么也得不到。

于 2012-09-24T22:44:28.277 回答
2

主要区别在于img标签中的图像是硬编码的。

使用 CSS，您可以创建不同的设计、在它们之间切换、重新设计页面，而无需更改源代码。要查看 CSS 的强大功能，请查看http://www.csszengarden.com/，所有页面都使用相同的 HTML 源代码，但 CSS 布局不同。

正如@Shmiddty 所说，ifimg用于嵌入图像（实际内容，例如画廊或文章的图片），而 CSS 用于设计。

此外，您提到的问题有很好的所有用例列表：When to use CSS background-image.

于 2012-09-24T22:39:12.973 回答
2

目标是将内容与演示分开。HTML 应该只包含内容，所有的展示都应该移到 CSS 中。一旦你实现了这一点，你就会获得一些有用的副作用：

  • CSS（展示代码）由用户的浏览器缓存，请求的每个 HTML 文件更小。这也有一些 SEO 好处（减少代码绒毛）。
  • 在为视障用户解释您的页面时，屏幕阅读器必须少费些功夫。确保您的 HTML仅包含内容意味着视障用户可以更快地找到他们正在寻找的内容。
  • CSS 使得以不同的视觉配置显示相同的内容成为可能，这是响应式网页设计运动的基石。正确描述您的内容和演示意味着能够跨多个平台（台式机、平板电脑、智能手机）使用相同的 HTML 文件。

但是，有时图像是特定页面上的内容。在这些情况下，您想使用IMG标签，而将图像移动到 CSS 实际上是错误的举动。关于何时何地使用文本到图像替换的一个很好的讨论是何时使用 IMG 与 CSS 背景图像？基本上，我的个人试金石是这样的：这张图片会在网站上多次使用吗？如果是，它可能是设计的一部分。一次性图像通常是内容。

如果您希望将您的设计图像移至 CSS，那么恭喜 :-p 您已经完成了大量的工作，但开始为您的网站作为 Web 生态系统的一部分的长期健康做一些有价值的事情。我强烈建议研究使用SASS/Compass系统将您的设计图像作为 sprite 进行管理（参见A List Apart:CSS Sprites和 Spriting with Compass）。

于 2012-09-24T22:42:53.247 回答
0

图像替换的要点之一是在标签中使用您的网站标题以h1获得良好的 SEO，然后隐藏文本并用自定义徽标替换它。

这也使您的网站更易于访问。例如，您的用户出于某种原因禁用了 CSS（可能是屏幕阅读器）。他们仍然会看到您网站标题的文本表示，而普通用户会看到自定义图形。

于 2012-09-24T22:41:30.977 回答