HTML-img图片详解

本文介绍: 图片(img 图片标签说明和属性、src 路径、png24图片问题解决方法，相对路径、格式和使用规则，背景图片的样式、重复方式、定位、简写，s pr i t e雪碧图精灵图原因和实例说明)

img 图片 标签

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

请添加图片描述

1. 说明

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

2. 属性

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

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

1.宽度和高度如果只设置一个，另一个也会等比例调整大小
2.如果两个值同时指定则按照你指定的值来设置
3.一般开发中除了自适应的页面，不建议设置 wi dt h 和 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="box2"></div>
    <img src="img/3.png" />
    <!-- 在body标签的最后引入外部的JS文件 -->
    <!-- 以下代码只会在IE6中执行，其他浏览器中无效 -->
    <!--[if IE 6]>
      <script
        type="text/javascript"
        src="js/DD_belatedPNG_0.0.8a-min.js"
      ></script>

      <script type="text/javascript">
        Dd_belatedPNG.fix("*");
      </script>
    <![endif]-->
  </body>
</html>

请添加图片描述

1. png24 图片问题

在 IE6 中，对图片格式 png24 的支持度不高
如果使用的图片格式是 png24，则会导致透明效果无法正常显示

2. 解决 方法：

可以使用 png8 来代替 png24，即可解决问题，
- 但是使用 ong8 代替 png24 以后，图片的清晰度会有所下降
使用 JavaScript 来解决该问题，需要向页面中引入一个外部的 JavaScript 文件
- 然后再写一下简单的代码，来处理该问题

<!-- 以下代码只会在IE6中执行，其他浏览器中无效 -->
<!--[if IE 6]>
  <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>

  <script type="text/javascript">
    Dd_belatedPNG.fix("*");
  </script>
<![endif]-->

相对路径

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>相对路径</title>
  </head>
  <body>
    <img src="2.gif" alt="这是一个大松鼠" />
  </body>
</html>

请添加图片描述

相对路径值相对于当前资源所在目录的位置

1. src 属性

src属性配置的是图片的路径，目前我们所要使用的路径全都是相对路径

<img src="abc/bcd/2.gif" alt="这是一个大松鼠" />

可以使用…/来返回一级目录,返回几级目录就写几个…/

<img src="../../img/2.gif" alt="这是一个大松鼠" />

2. 相对路径的图片

图片的格式
- JPEG(JPG)
  1. JPEG图片支持的颜色比较多，图片可以压缩，但是它不支持透明
  2. 一般使用JPEG来保存照片等颜色丰富的颜色
- GIF
  1. GIF支持的颜色少，只支持简单的透明，支持动态图
  2. 图片颜色单一或者是动态图时可以使用gif
- PNG
  1. PNG支持的颜色多，并且支持复杂的透明
  2. 可以用来显示颜色复杂的透明图片
图片的使用原则
- 效果不一致，使用效果好的
- 效果一致，使用小的

背景

背景 样式和背景图片重复方式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      .box1 {
        width: 1024px;
        height: 724px;
        margin: 0 auto;
        /*设置背景样式*/
        background-color: #bfa;

        background-image: url(img/1.png);
        background-repeat: repeat-y;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
  </body>
</html>

请添加图片描述

1. 背景 样式

/*设置背景样式*/
background-color: #bfa;

2. 背景图片

background-image 来设置背景图片

语法：background-image:url(相对路径);
- 如果背景图片大于元素，默认会显示图片的左上角
- 如果背景和元素一样大，则会将背景图片全部显示
- 如果背景元素小于元素大小，则会默认将背景图片平铺以充满元素
可以同时为一个元素指定背景颜色和背景图片，
- 这样背景样式将会作为背景图片的底色
- 一般情况下设置背景图片时都会同时指定一个颜色

background-image: url(img/1.png);

3. 背景图片的重复方式

background-repeat 用来设置背景图片的重复方式
可选值：
- repeat，默认值，背景图片会双重复(平铺)
- no-repeat,背景图片不会重复，有多大就显示多大
- repeat-x,背景图片沿水平方向重复
- repeat-y，背景图片沿垂直方向重复

background-repeat: repeat-y;

背景图片的定位

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        height: 500px;
        margin: 0 auto;
        /*
         * 设置一个背景 
         */
        background-color: #bfa;
        /*
         * 设置一个背景图片
         */
        background-image: url(img/4.png);
        /*
         * 设置一个图片不重复
         */
        background-repeat: no-repeat;
        /* background-position: -80px -40px; */
        background-attachment: fixed;
      }
      body {
        background-image: url(img/3.png);
        background-repeat: no-repeat;
        background-attachment: fixed;
      }
    </style>
  </head>
  <body style="height: 5000px;">
    <div class="box1"></div>
  </body>
</html>

请添加图片描述

1. 背景的定位

1. 说明

背景图片默认贴着元素的左上角显示
通过 background-position 可以调整背景图片在元素中的位置

2. 可选值

该属性可以使用 top right left bottom center 中的两个值来指定一个背景图片的位置
- top left 左上
- bottom right 右下
如果只给出一个值，则第二个值默认是 center

也可以直接指定两个偏移量

第一个是水平偏移量
- 如果指定的是一个正值，则图片向右移动指定的像素
- 如果指定的是一个负值，则图片向左移动指定的像素
第二个是垂直偏移量
- 如果指定的是一个正值，这图片向下移动指定的像素
- 如果指定的是一个负值，则图片向上移动指定的像素

background-position: -80px -40px;

2. 背景图片跟随滚动

background-attachment 用来设置背景图片是否随着页面一起滚动
可选值： – scroll,默认值，背景图片随着窗口滚动 – fixed，背景图片会固定在某一位置，不随页面滚动

不随窗口滚动的图片，我们一般都设置给 body，而不设置给其他元素
当背景图片的 background-attachment 设置为 fixed 时，
- 背景图片的定位永远相对于浏览器的窗口

background-attachment: fixed;

请添加图片描述

背景简写

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      body {
        background-color: #bfa;
        background: #bfa url(img/3.png) center center no-repeat fixed;
      }
    </style>
  </head>
  <body></body>
</html>

请添加图片描述

1. 分开写背景的各个样式

/* 设置一个背景颜色 */
/background-color: #bfa;
/*设置一个背景图片 */
background-image: url(img/3.png);
/* 设置背景不重复 */
background-repeat: no-repeat;
/*设置背景图片的位置*/
background-position: center center;
/*设置背景图片不随滚动条滚动 */
background-attachment: fixed;

2. 简写 background

通过该属性可以同时设置所有相关的样式
没有顺序的要求，谁在前谁在后都行
- 也没有数量的要求，不写的样式就使用默认值

background: #bfa url(img/3.png) center center no-repeat fixed;

sprite雪碧图(精灵图)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      .btn:link {
        /*将a转换为块元素*/
        display: block;
        /*设置宽高*/
        width: 93px;
        height: 29px;
        /*设置背景图片*/
        background-image: url(img/btn/btn.png);
        /*设置背景颜色不重复*/
        background-repeat: no-repeat;
      }
      .btn:hover {
        /*
          * 当是hover状态时，希望图片可以向左移动
          */
        background-position: -93px 0;
      }
      .btn:active {
      /*
        * 当是active状态时，希望图片可以再向左移动
        */
        background-position: -186px 0;
      }
    </style>
  </head>
  <body>
    <!-- 创建一个超链接 -->
    <a class="btn" href="#"></a>
  </body>
</html>

link状态:
请添加图片描述

hover 状态：

请添加图片描述

active状态：

请添加图片描述

1. 问题说明

做完功能以后，发现在第一次切换图片时，会发现图片有一个非常快的闪烁，
这个闪烁会造成一次不佳的用户体验。

2. 产生闪烁问题的原因：

背景图片时以为外部资源的形式加载进网页的，浏览器没加载一个外部资源就需要单独的发送一次请求，
- 但是我们的外部资源不是同时加载的，浏览器只有在资源被使用的时候才回去加载资源
我们这个练习，一上来浏览器只会加载 link.png 由于 hover 和 active 状态没有马上触发，
- 所以 hover.png 和 active.png 并不是立即加载的
当 hover 被触发时，浏览器才去加载 hover.png
当 active 被触发时，浏览器才去加载 active.png

由于加载图片需要一定的时间，所以在加载和显示的过程中会有一段时间背景图片无法显示，导致出现闪烁的情况

3. sprite雪碧图(精灵图)说明

为了解决该问题，我们可以将三个图片整合为一张图片，这样可以同时将三张图片一起加载，就不会出现闪烁的问题了
然后通过 background-position 来切换要显示的图片的位置，这种技术叫做图片整合技术，(CSS-Sprite)
优点
- 将多个图片整合为一张图片里，浏览器只需要发送一次请求，可以同时加载多个图片，提高了访问的效率，提高了用户的体验。
- 将多个图片整合为一张图片，减小了图片的总大小，提高了请求的速度，增加了用户体验

4. 利用雪碧图(精灵图)的练习

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				width: 129px;
				height: 45px;
				background-image: url(img/amazon-sprite_.png);
			}
			.box2{
				width: 42px;
				height: 30px;
				background-image: url(img/amazon-sprite_.png);
				/*
				 * 设置偏移量
				 */
				background-position: -58px -338px;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>