关于html：何时使用IMG与CSS背景图像？


When to use IMG vs. CSS background-image?

在什么情况下，使用html IMG标记显示图像比使用css background-image更合适，反之亦然？

因素可能包括可访问性、浏览器支持、动态内容或任何技术限制或可用性原则。

相关讨论

IMG的正确使用

  • 如果你想使用IMG。人们打印您的页面，您希望默认情况下包含图像。杰迪
  • 当图像具有重要的语义意义时，如警告图标时，使用IMG(与alt文本一起使用)。这样可以确保图像的含义可以在所有用户代理(包括屏幕阅读器)中进行通信。

    • img的语用用法

  • 如果图像是内容的一部分，例如徽标或图表或人物(真人，而不是普通照片人物)。&Sanchothefat公司
  • 如果您依赖浏览器缩放来呈现与文本大小成比例的图像，请使用IMG。
  • 使用IMG。对于IE6中的多个叠加图像。
  • 按顺序使用IMG和z-index要拉伸背景图像以填充整个窗口，请参见下面的6。
  • 使用IMG而不是background-image，可以在后台显著提高动画的性能。

    • 何时使用CSS背景图像

  • 如果图像不是内容的一部分。&Sanchothefat公司
  • 使用CSS背景图像对文本进行图像替换，如段落/标题。&Sanchothefat公司
  • 如果你想要的话，使用background-image。人们打印您的页面，您不希望默认情况下包含图像。杰迪
  • 如果需要改进下载时间，请使用background-image，如使用CSS精灵。
  • 如果您只需要图像的一部分是可见的，那么使用background-image，就像使用css sprites一样。
  • 使用background-image和background-size:cover来拉伸背景图像以填充整个窗口。
    • 相关讨论

    对我来说这是一个黑白相间的决定。如果图像是内容的一部分，例如徽标或图表或人员(真人，而不是普通照片人员)，则使用标记加alt属性。其他一切都有CSS背景图像。

    使用CSS背景图像的另一个时间是对文本(如段落/标题)进行图像替换。

    相关讨论

    我很惊讶还没有人提到这个：CSS转换。

    您可以本地转换div的背景图像：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    #some_div {
        background-image:url(image_1.jpg);
        -webkit-transition:background-image 0.5s;
        /* Other vendor-prefixed transition properties */
        transition:background-image 0.5s;
    }

    #some_div:hover {
        background-image:url(image_2.jpg);
    }

    这节省了任何类型的javascript或jquery动画，以淡出的src。

    有关MDN上转换的详细信息。

    相关讨论

    以上答案只考虑设计方面。我将在SEO方面列出它。

    何时使用。

  • 当你的图像需要被搜索引擎索引时
  • 如果它与内容有关，而不是与设计有关。
  • 如果您的图像不是太小(不是图标图像)。
  • 可以添加alt和title属性的图像。
  • 使用打印媒体CSS打印网页中的图像

    • 何时使用css background-image。

  • 纯粹用于设计的图像。
  • 与内容无关。
  • 我们可以用CSS3播放的小图像。
  • 重复图片(在博客作者图标中，每一篇文章都会重复日期图标等)。

    • 因为我将基于这些原因使用它们。这些是搜索引擎优化图像的良好实践。

    默认情况下，浏览器并不总是设置为打印背景图像；如果您希望让其他人打印您的页面：)

    相关讨论

    如果您的CSS位于外部文件中，那么通常可以方便地将站点中经常使用的图像(如头图像)显示为背景图像，因为这样您以后可以灵活地更改图像。

    例如，假设您有以下HTML：

    1
     

    ……和CSS：

    1
    2
    3
    4
    5
    #headerImage {
        width: 200px;
        height: 100px;
        background: url(Images/headerImage.png) no-repeat;
    }

    几天后，您更改了图像的位置。你所要做的就是更新CSS：

    1
    2
    3
    4
    5
    #headerImage {
        width: 200px;
        height: 100px;
        background: url(../resources/images/headerImage.png) no-repeat;
    }

    否则，您必须在每个HTML文件中更新相应的标记的src属性(假设您没有使用服务器端脚本语言或CMS来自动执行该过程)。

    如果您不希望用户能够保存图像(尽管我从未需要这样做)，背景图像也很有用。

    相关讨论

    与桑乔夫的回答大致相同，但从另一个方面来说。我总是问自己：如果我完全从网站中删除样式表，那么剩下的元素是否只属于内容？如果是这样，我的工作做得很好。

    一些答案使这里的情况过于复杂。这是一个非常简单的情况。

    每当你想要放置图像时，只需回答这个问题：

    这是内容的一部分还是设计的一部分？

    如果你不能回答这个问题，你可能不知道你在做什么或者你想做什么！

    另外，不要把这两种技术放在一边，因为你想不想"打印机友好"。也不要用CSS从SEO的角度隐藏内容。如果你发现自己在CSS文件中管理你的内容，那你就大错特错了。这只是一个关于内容与否的微不足道的决定。其他方面都应该被忽略。

    相关讨论

    我将添加另外两个参数：

    • 如果需要调整图像的大小，img标记很好。例如，如果原始图像是100px乘100px，而您希望它是80px乘80px，则可以设置img标记的css宽度和高度。I don't know any good way to do this using background image.edit:This can now also be done with a background image，using the background-sizecss3 attribute.

    • 当需要在精灵之间动态切换时，使用背景图像是很好的。例如，如果您有一个按钮图像，并且您希望在光标悬停在元素上时显示一个单独的图像，则可以使用包含普通和悬停精灵的背景图像，并动态更改背景位置。

    相关讨论

    前景=img.

    背景=CSS背景。

    相关讨论

    使用标记的另一个好处是与seo相关，即，您可以在图像标记的alt属性中提供有关图像的其他信息，但在通过css指定图像时，无法提供此类信息，在这种情况下，搜索引擎只能索引图像文件名。alt属性绝对比css方法提供了标签seo的优势。这就是为什么根据我的说法，最好使用标记指定您希望在图像搜索结果(如谷歌图像搜索)中排名良好的图像。

    相关讨论

    仅在必要时才使用背景图像，例如具有平铺图像的容器。

    使用图像的主要优点之一是它对SEO更好。

    相关讨论

    使用背景图像，您需要绝对指定尺寸。如果你事先不了解他们或者无法确定他们，这可能是一个重大问题。

    的一个大问题是重叠。如果我想要一个CSS内部阴影在我的图像(box-shadow:inset 0 0 5px rgb(0,0,0,.5)上)？在这种情况下，由于不能有子元素，所以需要使用定位并添加等同于无用标记的空元素。

    总之，这是一个非常情景化的过程。

    应使用background-image的其他几种情况：

    • 当鼠标悬停在图像上时，希望图像发生更改。
    • 当您想向图像添加圆角时。如果您使用img，图像会从圆角中泄漏。
    相关讨论

    在有多个外观或设计版本的情况下使用CSS背景图像。可以使用javascript动态更改元素的类，这将强制它呈现不同的图像。使用img标签，可能会更复杂。

    相关讨论

    这里有一个技术考虑：图像会动态生成吗？在HTML中生成标记比动态编辑CSS属性容易得多。

    相关讨论

    关于使用css translatex/y(动画HTML的正确方法)设置图像的动画-如果您对正在设置动画的css背景图像和正在设置动画的img标记执行chrome时间线记录，您将看到css背景图像的绘制时间大大缩短。

    图像的大小如何？如果我使用img标签，浏览器将缩放图像。如果我使用CSS背景，浏览器只会从较大的图像中剪切一个块。

    还有另一个原因！如果您有一个响应式设计，并且希望通过媒体查询将低、中、高分辨率图像用于设备，那么您也应该使用背景。

    相关讨论

    另外，我有一个图库部分，它的图片大小不一致，所以即使这些图片明显被视为内容，我还是使用背景图片，并将它们放在具有设置大小的分区中。这与Facebook在其专辑中的表现类似。

    img是一个HTML标记，因此应该使用它。为了引用或说明事物，人们，例如：在文章中。

    另外，如果图像有意义或必须是可点击的，IMG比CSS背景更好。我认为，对于所有其他情况，都可以使用CSS背景。

    尽管如此，这是一个需要反复讨论的主题。

    来自法国巴黎的网络学生

    如果您希望用户能够"右键单击"和"保存图像"/"保存图片"，那么只需添加一个小的图像，就应该使用img标记，这样如果您打算将图像作为其他人的资源提供。

    使用背景图像将(据我所知，在大多数浏览器上)禁用直接保存图像的选项。

    一个小的输入，在iPhone上，即使是小图像，响应图像也会在一分钟内减慢渲染速度，这是我遇到的问题：

    1
    2
    3
    <!-- Was super slow -->

        <img src=".." width="100%" />

    但当切换到使用背景图像时，问题就消失了，这只有在针对较新的浏览器时才可行。

    相关讨论

    首先加载IMG，因为src在HTML文件中，而在background-image的情况下，样式表中提到了源文件，因此在加载样式表后加载图像，从而延迟了网页的加载。

    相关讨论

    HTML用于内容，CSS用于设计。图像是必要的吗？它需要被屏幕阅读器读取吗？如果答案是"是"，则将图像放入HTML。如果它纯粹是为了设计样式，那么可以使用CSS中的background image属性来注入图像。正如这里已经提到的许多人一样，如果愿意，您可以在图像上使用伪元素。

    另外请注意，大多数搜索引擎蜘蛛不索引CSS背景图像，因此背景图像将被忽略，您将无法从搜索引擎获得任何流量(简而言之，没有SEO的好处)。

    其中，所有用标签定义的图像都被编入索引(除非手动排除)，并且如果它们的标题/alt属性和文件名得到了适当的优化(w.r.t一些关键字)，则可以从搜索引擎引入流量。

    当我想让它们100%可伸缩时，我使用图像而不是背景图像，这在大多数浏览器中都得到了支持。

    如果只为页面上的特殊内容或只为一个页面添加图像，则应使用img标记；如果要将图像放在多个页面上，则应使用css背景图像。

    另一个背景图像pro:

      /列表的背景图像。

      如果背景图像是整体设计的一部分并且在多个页面上重复，则使用背景图像。最好以背景精灵的形式进行优化。

      对所有不属于整体设计的图片使用标签，并且很可能只放置一次，例如文章、人物和重要图片的特定图片，这些图片应该添加到谷歌图片中。

      **我在标签中唯一重复的图像是站点/公司徽标。因为人们倾向于点击它进入主页，所以你用一个标签来包装它。

      如果您希望图像具有流动性，并且可以缩放到不同的屏幕大小，则可以使用img标记。对我来说，这些图片主要是内容的一部分。对于大多数不属于内容的元素，我使用css sprites使下载大小保持最小，除非我真的想要动画图标等。

      我认为你不应该使用img标签。HTML是为内容设计的，而不是视觉样式。页面上的所有图像都应该来自于CSS，而HTML代码是纯的。(即使需要更长的时间来构建)

      相关讨论