web图片的格式(大部分格式)
图片格式 压缩方式 透明度 动 画 适应场景
jpg 有损压缩 不支持 不支持 照片|文章配图|广告图
png 无损压缩 支持 不支持 透明图|图标|简单背景
gif 无损压缩 支持 支持 图标|小动画|表情包
jpg图片
a.后缀为.jpg或.jpeg
b.色彩丰富,过渡平滑,适用于照片类型
c.有压缩比,压缩比越高,图片质量越低,但文件越小;
d.无法保存透明度,不能呈现动画效果;
png图片
a.后缀为.png,有8位,24位,32位三种形式
b.兼具jpg和gif的彩色模式,压缩比高,生成文件的体积小;
c.png-8位可以实现全透明/不透明的效果
d.png-24(32)位可以实现半透明的效果;
e.不能实现动画;
gif图片
a.后缀.gif
b.只包含256种色彩,适用于简单和单纯的图像;
c.可以实现全透明|不透明的效果
d.可以包含多帧画面,实现小动画
总结:
1.照片或色彩丰富的图片jpg;
2.透明效果:png;
3.色彩单纯的小图(logo|图标|重复背景等):png
4.小动画:gif
应用的途径:
1.图片内容(作为网页的内容数据,html进行结构化)
写在html网页结构中,以<img>标签的形式关联图片
2.背景图片(作为网页的修饰效果,css进行表现)
写在css样式表中,如使用background属性定义背景图;
内容图片和背景图片的应用区别
内容图片是网页数据的一部分,在页面中占位,如果加载出问题或失败,则会出现占位的标记,影响页面的排版或布局;
背景图片仅用来装饰和美化页面,在页面标记中没有占位,如果加载失败,对页面的排版没有影响;
判断使用内容图 or 背景图
1.内容图片一般具有内容意义,属于文档内容,应该使用html<img>标签元素;
如 公司logo|用户照片|新闻配图|广告宣传图|产品图|压缩图等
2.背景图不具备内容的涵义,作为修饰html元素存在,即便不可用也不会影响到页面的可用性;
如背景修饰图案|内容图片点缀等
图像标签<img>
a.单标签
b.行间元素,但默认inline-block效果,可以直接使用于盒子模型
c.<img>标签不能直接在网页中插入图像,而是指定一个链接图像的文件的地址,因此<img>
标签的创建是被引用图像的占位空间;
属性:
src 必须属性;指定图像链接路径;
alt 必须属性;规定图像的替代文本(图片无法正常加载的时候起到替换文本的作用)
title 鼠标滑过时显示的文字提示信息
width 宽:(推荐使用css实现)
height:高(推荐使用css实现)
alt属性和title属性的区别
alt属性是必须的即alt="" title属性可以根据需求来设置;
alt a.alt的值是用来说明图片内容的涵义的;
b.浏览器没法“看”图,需要通过alt来认知图片的意义;
c.当图片无法呈现的时候,alt会替代图片出现,让浏览者知道图片的意义;
title a.title的值是用来说明图片(元素)的一些额外信息;
b.鼠标移动到图片(元素)上呈现的提示文本;
c.title文本能够很好的增强用户的体验
widht&height
a.widht和height不需要带单位,默认单位px
b.如果图片指定了widht和高度(通常是图片的本身尺寸)页面加载的时候会保留指定尺寸;
如果没有指定,图片加载失败或出现问题时,img标签的占位空间无法确定,可能会破坏页面的布局;
c.遵循内容和样式的分离,css设定的width或height会优先于img标签中的widht和height;
css设置背景
background-color:背景色
a.设定html元素的背景色,只能定义位纯色;
b.大多数html元素的默认背景色时透明的
background-color:transparent
c.同时设定背景色和背景图片时,背景图片会呈现在背景色之上;
background-image:背景图片
a.通过url路径为元素添加背景图片;
b.图片的表现行为(重复渲染,定位,大小等)由其他的背景属性定义;
background-image:仅定义使用那张图片;
c.默认情况下,背景图像从html元素左上角开始显示,并在水平方向和垂直方向重复排列;
background-repeat:背景图片重复的方式
a.设置是否重复背景图片及如何重复背景图像
b.值
repeat 默认值 背景图片在垂直和水平方向重复
repeat-x 背景图片在水平方向重复
repeat-y 背景图片在垂直方向重复
no-repeat 不允许重复,背景图片仅显示一次;
background-attachment:背景图片附着位置的方式
a.设置背景图片的固定方式(针对不同的参照物)
b.这个属性和background-position容易冲突,因此时间应用中并不常用,通常设置默认值即可;
值:
scroll:默认值;背景图片会随着页面其于部分的滚动而滚动;相对于html元素(容器本身)
fixed :背景图片位置固定,不会随着页面的其余对象的滚动而滚动;(相对于浏览器窗口)
local: 背景图片的会随着页面其余部分的滚动而滚动;(相对于内容(容器里面的内容))
background-position:背景图片的位置定位
a.设置背景图先的起始点(原点)位置,默认是html元素的左上角;
b.其他的值应该有2个依次 1.横向坐标值 2.纵向坐标值
c.如果指定了1个值,那么改值为横向的坐标值,第二个纵向的坐标值默认为50%(center)
d.值的写法可以用三种形式:像素值 |百分比|范围值
e.允许负值存在;
f.如果background-attachment为fixed,那么background-position会无法正常工作;
background 复合属性;
a.一个声明设置所有的属性
b.值得顺序依次为
background-color background-image background-repeat background-attachment background-position
以上属性无需全部使用,可以按照页面的时间需要使用,没有设定的属性的值使用默认值;
建议使用符合属性进行背景的定义,不仅代码高效,针对老版本浏览器兼容性也更好;