任务9-2

1、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用

CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。

优点:

减少加载网页图片时对服务器的请求次数
可以合并多数背景图片和小图标,方便在任何位置使用,这样不同位置的请求只需要调用一个图片,从而减少对服务器的请求次数,降低服务器压力,同时提高了页面的加载速度,节约服务器的流量。
提高页面的加载速度
sprite 技术的其中一个好处是图片的加载时间(在有许多 sprite 时,单张图片的加载时间)。由所需图片拼成的一张 GIF 图片的尺寸会明显小于所有图片拼合前的大小。单张的 GIF 只有相关的一个色表,而单独分割的每一张 GIF 都有自己的一个色表,这就增加了总体的大小。因此,单独的一张 JPEG 或者 PNG sprite 在大小上非常可能比把一张图分成多张得来的图片总尺寸小。
减少鼠标滑过的一些bug
IE6不会主动预加载鼠标滑过即a:hover中的背景图片,所以,如果使用多张图片,鼠标滑过会出现闪白的现象。使用CSS雪碧,由于一张图片即可,所以不会出现这种现象。

缺点:

内存使用
影响浏览器的缩放功能
拼图维护比较麻烦
使CSS的编写变得困难
CSS 雪碧调用的图片不能被打印
错误得使用 Sprites 影响可访问性

2、img标签和CSS背景使用图片在使用场景上有何区别

img标签的图片一般是可变的,例如网站上的广告,用户头像,产品介绍、网页介绍,这些能传达更多内容的东西。


QQ截图.jpg

css背景图片一般比较少变化,除非网页改版或者一些样式需要改版才会改变。


QQ截图20160809214924.jpg

3、title和 alt属性分别有什么作用?

title 属性是在你鼠标悬停在该图片上时显示一个小提示,像是标签批注一类的作用。title属性可以用在除了 base,basefont,head,html,meta,param,script 和 title 之外的所有标签。


QQ截图20160809221646.jpg

alt 属性是在你的图片因为某种原因不能加载时在页面显示的提示信息,它会直接输出在原本加载图片的地方。alt属性只能用在img、area和input元素中。


QQ截图20160809221222.jpg

4、background: url(abc.png) 0 0 no-repeat;这句话是什么意思

背景图引用相对目录路径为abc.png的图片。
backgroun-position:0 0为左上角(背景图片放置容器位置)。
x% y% ( 第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值,另一个值将是 50%。)
mpx npx (第一个值是水平位置,第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值,另一个值将是50%。)
no-repeat:不重复。
repeat:重复
no-repeat:不重复
repeat-x:仅水平重复
repeat-y:仅垂直重复
inherit:继承自父辈元素。

5、background-size有什么作用? 兼容性如何? 常用的值是?

background-size 属性规定背景图像的尺寸

QQ截图20160809223638.jpg

常用值:
length设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
QQ截图20160809225546.jpg

percentage以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。
QQ截图20160809225708.jpg

cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
QQ截图20160809225832.jpg

contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。
QQ截图20160809225932.jpg

6、如何让一个div水平居中?如何让图片水平居中?

div水平居中:margin:0 auto;
图片水平居中:1、//ie8及以上
display:table-cell;
vertical-align:middle;
2、在内层容器内加一个空元素
.item:before{
display:inline-block;
height:100%;
vertical-align:middle;
}
.item2 img{
vertical-align:middle;
}
3、js处理,设置上下外边距等高

7、如何设置元素透明? 兼容性?

opacity:从 0.0 (完全透明)到 1.0(完全不透明)

QQ截图20160809230850.jpg

8、opacity和 rgba都能设置透明,有什么区别

opacity:一般用于调整图片或者模块的整体不透明度,设置opacity元素的所有后代元素会随着一起具有透明性。opacity取值0~1之间。
rgba:设置颜色的不透明度,一般用于调整background-color、color、box-shadow等的不透明度。Alpha透明度。取值0~1之间。

推荐阅读更多精彩内容

  • 一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 1、css sprite是一种图片处理方法,就是将...
    鸿鹄飞天阅读 53评论 0 0
  • 1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用? 答:CSS Sprite,中文叫雪碧图,也有人喊...
    Lily的夏天阅读 753评论 0 1
  • 1. CSS Sprite(雪碧图|精灵图)指什么? 有什么作用。CSS雪碧 即CSS Sprite,也有人叫它C...
    饥人谷_duoduo阅读 45评论 0 0
  • 1. CSS Sprite(雪碧图|精灵图)指什么? 有什么作用? CSS Sprite能够把一些小的背景图片整合...
    墨灯阅读 55评论 0 0
  • 看了疯狂动物城,明白在这个世界的角落总有人默默的坚持,哪怕不被人理解,她依然坚持。想到如今的和平年代,是边疆的守卫...
    An安和阅读 156评论 0 12