HTML图片与背景样式深度解析-CSDN博客

本文链接：https://blog.csdn.net/weixin_64933233/article/details/127980123

本文详细介绍了HTML的img标签，包括其说明、属性和png24图片问题的解决方案。此外，还探讨了相对路径下图片的使用，以及背景图片的样式、重复方式、定位和背景简写。最后，文章讲解了CSS精灵图（Sprite）的概念，如何解决图片闪烁问题以及其优点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

img 图片标签
相对路径
- 1. src属性
- 2. 相对路径的图片
背景
sprite雪碧图(精灵图)

img 图片标签

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>图片标签</title>
  </head>
  <body>
    <img src="2.gif" alt="这是一个大松鼠" width="100px" height="500px" />
  </body>
</html>

请添加图片描述

1. 说明

使用 img 标签来引入一个外部图片
img 标签也是一个自结束标签

2. 属性

src:设置一个外部图片的路径
alt：可以用来设置在图片不能显示时，对图片的描述

1.搜索引擎可以通过 alt 属性来识别不同的图片
2.如果不写 alt 属性，则搜索引擎不会对 img 中的图片进行收录
width:可以用来修改图片的宽度,一般使用 px 作为单位
height:可以用来修改图片高度

1.宽度和高度如果只设置一个，另一个也会等比例调整大小
2.如果两个值同时指定则按照你指定的值来设置
3.一般开发中除了自适应的页面，不建议设置 width 和 height

<img src="1.gif" alt="这是一个大松鼠" width="100px" height="500px" />

3. 补充

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      .box1 {
     
        width: 200px;
        height: 200px;
        background-image: url(img/3.png);
        background-repeat: no-repeat;
      }
      .box2 {
     
        width: 200px;
        height: 200px;
        background-image: url(img/4.png);
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body style="background-color: #bfa;">
    <div class="box1"></div>
    <div class="