在 Web 编程中,您可以使用标签放置图像img
或使用 CSS 作为背景图像background-image
,结果将在视觉上相似:
.hamburguesa {
background-image:url(https://i.imgur.com/tbhsHbKh.jpg);
width:256px;
height:256px;
display:inline-block;
}
<img src="https://i.imgur.com/tbhsHbKh.jpg" alt="Hamburguesa" />
<div class="hamburguesa"></div>
使用一个比另一个有什么优势?在什么情况下应该使用它,应该在哪些情况下使用img
它background-image
?
需要考虑的因素:可用性、可访问性、适应性、显示类型(屏幕、打印机等)。
这完全取决于您对图像的用途:
IMG
IMG
您希望人们打印页面并且希望默认包含图像,请使用此选项。IMG
(withalt
),例如警告图标。这可确保将图像的含义传达给所有使用代理,包括屏幕阅读器。IMG
如果您希望浏览器显示与文本大小成比例的图像,请使用此选项。IMG
IE6 中的多个叠加图像。IMG
而不是 background-image 可以显着提高背景动画的性能。CSS background-image
CSS background-image
如果图像不是内容的一部分,请使用。CSS background-image
图片替换文字时使用CSS background-image
您希望人们打印页面并且您不希望默认包含图像,请使用此选项。CSS background-image
必要时使用以缩短下载时间。CSS background-image
如有必要,请使用以仅显示图像的一部分。CSS background-image
结合使用以CSS background-size:cover
拉伸背景图像以覆盖整个容器(例如 div、body 等)。好吧,什么时候应该使用它,这取决于,它很大程度上取决于项目或设计。
例子:
background-image
代表公司或具有简短描述性文本的产品的字符或图像的 div 中。最令人感兴趣和最大的优势之一是当图像的分辨率太大并且应用响应式分辨率不适合口味时,即某些部分的尺寸变得太小或有时会出现模糊效果。
示例
background-image
:优点是它适应了响应式但图像的某些部分通过隐藏某些不需要的内容来拯救,更改
background-position
重要的值以添加此属性background-size: cover;
用于其操作。在图像中,
img
如果您将 的值更改height: auto;
为 aheight: 600px;
如果您在更改值时观察到差异,则它不再占据站点的 100%,并且如果您将站点的 100% 更改为画笔width
,则响应性将丢失。关于何时使用
img
更多对应于显示代表性图像的产品,或者像公司或网站的徽标。缺点:
background-image
的缺点之一
background-image
是图像中没有seo定位。为什么背景图像没有属性alt
google 和 seo 建议是,对于图像中的 seo 定位,它是给属性一个名称alt="Foro stackoverflow"
优点:
img
就是如果它在具有属性的图像中具有 seo 定位
alt="stackoverflow"
。这将使您更容易找到您公司的名称,您在 SEO 定位中获得的空间越多越好。使用img是什么意思,从字面上添加图像。
当您想要放置某些元素的背景图像时使用背景图像,例如 div。
让我们将事物用于它们的用途:)
背景图片:多用于框或html内容引入背景图片。
Img:它用于放置图像,如博客、徽标、画廊等。
我的回答是从务实的使用中看出的,并且强调 SEO,超出了每个元素理论上可能的可能性。
我强烈建议
img
谨慎使用和使用,background-image
因为这应该是次要内容。img
img
当您需要搜索引擎使用 和 标签来抓取图像时alt
使用title
。您将希望大部分时间都可以抓取您的图像,当然它们必须是内容的一部分。img
当图像复杂或较大时使用。background-image
background-image
纹理或装饰等简单图像。这些图像不会被搜索引擎跟踪,因此它们具有相当大的权重,因为它们会降低性能,因此它们通常对网络无利可图。background-image
不属于内容的复杂图像。一个常见的例子是第三方图像,有时甚至有一个不透明的过滤器,不建议使用此图像,但有时这是一个好主意,因为它为网站增加了一定的吸引力。重要的考虑
img
它们background-image
可以用于复杂的图像,例如来自现实世界的照片,但要避免使用这些图像,尤其是background-image
因为除了增加网络的权重之外,在后一种情况下它们通常不会有利可图,因为它们不会被搜索引擎跟踪.background-image
之间的混淆或细线的原因。但是,作为一个例外,当您想要显示不属于内容但增加网站吸引力的复杂图像时,它有时会很有用。img
background-image
background-image
img
通常比后者更有用background-image
,后者只是一种设计实用程序,因为根据 SEO,它对内容并不直接重要,并且它的使用必须由标准或通过 A/B 测试来控制借助 Google Analytics 等工具。善用的例子
background-image
:除了它不是一个简单的图像之外,它是一个很好的实现,因为它不会覆盖很大的空间,因此通常不会很重,而且它不是内容的一部分。