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;
---------------------
作者：冯小东
来源：CSDN
原文：https://blog.csdn.net/baidu_25343343/article/details/52741547
版权声明：本文为博主原创文章，转载请附上博文链接！
