1. 图片的表示
我们在制作页面的时候，一般会遇到三种图片的表现形式，如下：
1.内容图片
内容图片是页面的真实内容。 没有内容图片，很难完全理解页面的内容。 例如网上商店中的产品展示图片，这些图片是网页的一部分，它们可以帮助您确定该页面的内容是否是您所需要的。
内容图像
2.布局图
布局图像出现在页面背景中，对于理解页面的内容来说不是必需的。 比如苹果官网的图片，不用这张图片也能理解页面文字描述的内容的含义。
布局图
3、互动图片
图中白框的图片会给您浏览页面时带来一些帮助，比如搜索图片，看到这里就知道您想要什么，购物车图片中可以看到已购买的商品，以及点击箭头图片可以看到更详细的产品等
互动图片
2. 创建内容图像
在HTML中我们使用img标签来创建图片，英文是image的缩写。
内容图像
3. 创建布局图像
布局图像是在CSS中创建的，使用CSS中的background属性，例如：
1)background-color定义背景颜色。 设置背景图片时，一定要设置背景颜色，保证背景图片失效时会显示背景颜色
2）background-image可以指向相对路径或绝对路径来添加图像。
3）background-repeat可以设置背景是否平铺在容器中html添加背景图片，包括四个关键字：
4）background-position属性可以控制背景图片显示在哪里，包括两个关键字，如：
background-position:topleft 设置要显示在容器左上角的图片，第一个关键字可以是top、center、bottom，第二个关键字可以是left、center、right
CSS中与背景相关的属性可以缩写为一行，例如：
background: #FF1298 url(images/logo.png) center right no-repeat;
第一个是图片的颜色、图像、位置、重复和 CSS 属性。 尽可能使用缩写。 缩写比单独书写更有效。
布局图
4. 创建用户交互图片
网络上最常用的三种图像格式
1）Jpeg可以显示照片或复杂图像
2）PNG最适合显示网页插图、徽标和小网页图标
3）gif适合显示网页插图、标志和网页小图标
建议：
通常用户交互图片都是一些小图标，所以使用png或gif作为用户交互图片； 使用CSS的background属性将用户交互图像添加到网页作为背景图像； 建议将用户交互图像放在同一个文件中，这样可以提高网络和服务器性能html添加背景图片，例如：
互动图片
互动图片
怎么做？ 后续教练将通过视频为您详细演示，请继续关注。
