html中图片显示方式 img与background的区别

前言

在HTML中，我们可以使用不同的方式来显示图片，其中最常见的是使用元素和CSS的background属性。本文将会对这两种方式进行比较，分析它们的区别以及在什么场景下使用更为合适。

img标签

1. 显示图片

代码解释：使用元素可以直接在HTML文档中显示图片。我们通过src属性指定图片的URL，alt属性用于提供图片的文字描述。当图片无法加载时，alt属性的文字描述将会显示在页面上。

2. 调整图片大小

代码解释：通过在元素中设置width和height属性，可以调整图片的显示大小。这两个属性值可以是像素值，也可以是百分比。

3. 响应式图片

代码解释：为了确保在不同屏幕上有更好的显示效果，可以使用srcset属性来为图片指定多个不同尺寸的资源。其中，1x代表设备像素比为1的情况，2x代表设备像素比为2的情况。

4. 显示错误处理

代码解释：在图片无法加载时，可以使用onerror事件来处理错误情况。上述代码中，当图片加载失败时，会替换为指定的错误图片error.jpg。

background属性

1. 显示背景图片

代码解释：使用CSS的background-image属性可以将图片设置为元素的背景。我们可以通过内联样式或者外部样式表来设置该属性。

2. 重复背景图片

代码解释：当背景图片的尺寸小于元素的尺寸时，可以使用background-repeat属性来设置背景图片的重复方式。repeat表示在水平和垂直方向上都进行平铺。

3. 背景图片定位

代码解释：通过background-position属性可以调整背景图片在元素中的位置。center表示将背景图片居中显示。

4. 背景图片大小

代码解释：使用background-size属性可以调整背景图片的大小。cover表示将背景图片等比例缩放，以覆盖整个元素，并保持纵横比不变。

总结

img标签和background属性都可以用来显示图片，但在不同的情况下可以选择使用不同的方式。

如果图片是HTML内容的一部分，比如新闻文章中的图片，那么使用标签更为合适，因为它能够直接在HTML文档中进行显示，并提供文字描述。

如果图片仅作为装饰性背景，比如网页的背景图或者元素的背景图，那么使用background属性更为适合，因为它可以对背景图片进行更加灵活的调整和定位。

通过了解和灵活运用这两种方式，我们可以更好地实现网页中的图片显示效果，提升用户体验。