css - 网页设计时何时使用图像以及何时使用背景图像？

Question

我是一个业余网页设计师，使用 html 和 CSS 来测试各种网站设计。然而，总是让我感到困惑的一件事是决定使用图像作为标签还是通过 css 或 html 将其用作背景。他们对此有什么经验法则吗？

Answer 1

正如其中一个答案指出的那样，您需要区分内容和实际页面样式。

让我详细说明一下。background-image 属性的用途是定义页面某个块的外观，无论是 adiv还是 a p，关键是要定义页面的外观。在定义页面设计的上下文中的图像（例如图案、徽标、渐变等）几乎不应该采用明确的img标签形式。该标签用于定义内容图像，与手头的新闻相关联的东西——这是你试图描绘的故事所独有的东西。

区分这两个概念非常重要，因为它可以让您考虑一个独立于底层内容的良好设计 - 应该是这样。统一、优雅和精确。

所以，在审查中。用于background-image定义构成您网站的各种块的外观，并在您想要添加特定于上下文的视觉内容时使用经典标签。 img

Answer 2

问题是内容或样式是在图像上画线的好地方。

这张图片会被重复使用吗？等等

Answer 3

您是否希望图像成为文档流的一部分，向搜索引擎提供描述（替代文本）？使用 img 标签。

如果您想在图像上放置其他元素（如文本、版权信息），请使用背景图像。您甚至可以通过在背景图像上放置具有透明度的图像来组合它以获得一些效果。

此外，存在许多使用背景图像定位来获得性能优势的示例（“精灵”）。