前端HTML<img>标签图像的属性和使用/图像img与背景background的区别

1.图像的URL

1、URL

          1、目录结构

               目录：文件夹名称，保存网页内容的文件夹

          2、URL

               URL(Uniform Resource Locator)统一资源定位器,俗称 路径,用来表示 网络资源的地址

               资源：图片，音频，视频，文件等...

               路径：从当前位置到目标资源位置所经过的路线。

 2、 三种表现形式:

               1、绝对路径

                    1、什么是绝对路径

                         从文件最高级路径下开始的完整路径。

                         1、访问网络资源

                              由 协议名称、主机名(域名/IP地址)、目录路径、文件名

                              ex ：获取 百度 LOGO

                                   协议名称：https

                                   主机名: www.baidu.com

                                   目录路径：img

                                   文件名：bd_logo1.png

                                   <img src="//www. baidu.com/img/bd_logo1.png" width="270" height="129">

                         2、访问本机资源

                              文件所在的最高级目录路径：？--文件所在的盘符

               2、相对路径

                    1、什么是相对路径

                         从当前文件所在的位置处开始，去查找资源文件所经过的路径就是相对路径

                         1、同目录

                              直接通过 资源文件名称 进行引用即可

                         2、子目录

                              先进入，再通过资源名称进行引用

                              images/1.jpg

                         3、父目录

                              先返回，在通过资源文件的名称或路径进行引用

                              返回:../

               3、根相对路径

                    特点：永远都是从网站所在的服务器根目录处开始查找

                    表现方式：/作为开始 

2.图像的格式

1、jpeg

图像图像联合专家组

.jpg 作为后缀来存储的

2、gif

                图形接口格式

                    特点：支持动画

                    .gif 作为后缀来存储的

       3、png

                    可移植网络图形

                    采用 无损压缩，有8位，24位，32位三种形式

                    支持 透明色(PNG24位不支持)

                    .png 作为后缀存储的 

3.图像的属性

  1、语法

                    <img>

  2、属性

                    1、src

                         要引用的图像URL(绝对，相对，根相对)

                         注意：URL 要严格区分大小写,服务器路径 严格区分大小写。本机路径则无所谓

                    2、width

                         宽度

                    3、height

                         高度

                         以 px 或 % 为单位的数值，如果省略单位不写，默认为 px

                         <img src="../Images/a.jpg" height="300">

                         注意： width 和 height 如果只给一个属性的话，那么另外一个属性会跟着等比缩放

                         <img width="100px" src="a.jpg"> 

4.图像的垂直对其方式

1、属性：vertical-align

               1、作用：

                    1、设置单元内容的垂直对齐方式

                    2、行内块元素或图片的垂直对齐方式

                         指定 行内块元素或图片元素两边的文本 相对于他们的 垂直对齐方式

               2、取值：

                    1、baseline

                         默认，基线对齐

                         文本基线：最后一行文本的底部

                    2、top

                    3、middle

                    4、bottom

               注意：对于图像来讲，可以设置 vertical-align为 非 baseline 以外的其他值来解决高度多 3px 的问题。 

5.背景background

1 、背景属性的作用

          控制元素的 背景颜色和 背景图像等信息

2、背景属性

          1、背景颜色

               属性：background-color

               取值：

                    合法颜色值

                    取值为 transparent（透明）

               注意：

                    背景颜色会从边框的位置处开始绘制

          2、背景图片

               属性：background-image

               取值：url(图片的URL)

               注意： 如果 背景图像和背景颜色同时存在的话，那么背景图会压在背景颜色的上面

          3、背景重复

               默认背景是有平铺效果

               属性：background-repeat

               取值：

                    1、repeat

                         默认值，垂直和水平方向平铺

                    2、no-repeat

                         不平铺，背景图只显示一次

                    3、repeat-x

                         仅在水平方向平铺

                    4、repeat-y

                         仅在垂直方向平铺

          4、背景图片尺寸

               属性：background-size

               取值：

                    1、value1 value2

                         value1：宽度

                         value2：高度

                    2、value1% value2%

                         取决于元素的宽和高的占比

                    3、cover

                         覆盖，把背景图扩充至足够的大(等比缩放)，使背景图像 完全的覆盖到元素背景区域

                         注意：有可能，背景图显示不完整

                    4、contain

                         包含，把背景图扩充至足够的大(等比缩放)， 直到背景图像的右边或下边碰到元素边缘为止

          5、背景图片固定

               属性：background-attachment

               取值：

                    1、scroll

                         默认值，背景会随着文档滚动

                    2、fixed

                         固定

          6、背景图像定位/位置(重难点)

               属性：background-position

               取值：

                    1、x y

                         x:背景图像横向偏移距离

                              取值为正，背景图向右移动

                              取值为负，背景图向左移动

                         y:背景图纵向偏移距离

                              取值为正，背景图向下移动

                              取值为负，背景图向上移动

                    2、x% y%

                         取决于父元素宽和高的占比

                    3、关键字

                         x:left/center/right

                         y:top/center/bottom

                         background-position:center;

                         注意： 使用关键字时，x，y的位置可以互换

                         background-position:top left;

              

               特殊使用方式：

               CSS Sprites : 图片拼合技术，将若干副小图像拼到一副大图中。以便减少服务器端的请求

               显示图像步骤：

               1、根据要显示的图标大小，创建一个一样大小的元素

 利用<span>或者<b>、<i>、<a>都行,设置他们的宽高

               2、将 拼合的图像作为 元素的背景，使用 背景图像定位的方式 移动图像以便显示要看的小图

 

               宽度：76px

               高度：15px

               x：-108px

               y：-238px

          7、背景属性简写

               将背景若干属性值声明在一个属性中

               语法：

                    background:color url() repeat attachment position;

               注意：如果采用 background的简写方式的话，被省略的值将采用默认值来取代

               background:red;

               常用方式：

                    background:url() repeat position;