任务9-2
2016-07-24 本文已影响0人
浩天天
1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用
答:
- 雪碧图是指把多个小图片合成一张大的图片,在页面加载的时候只需要加载一张大的图片即可,可以加快加载的效率。
- 用背景图片作为页面logo时,你的每一个url都会发一个网络请求,当你页面上有100个小icon,就会发送100个网络请求,所以会造成页面卡顿。把一些icon合并成一张图片来在页面上展示 用这个可以减少网络请求。
-
雪碧图会增加开发时间,而且图像定位需要精准的计算,如果有新的图标进来,很有可能打乱以前定位好的图标,使得以前的图标错乱,维护麻烦。
2.img标签和CSS背景使用图片在使用场景上有何区别?
答:
- img标签是写在HTML里的,而CSS背景图片是写在CSS里的。
- 网页会优先加载img标签里的图片,然后再加载CSS背景图片,如果你引用很大的一张img图片,页面会在这个大图片加载完之前,在其之后的内容都不会显示,而使用CSS背景图片会在加载完整个页面的结构之后才会加载这张背景图片,不会影响你浏览页面内容。
- img标签是当前页面的一部分一般用于可交互的背景图片上,而CSS背景图一般是固定不动的背景图。
3.title和alt属性分别有什么作用?
答:
- title属性是对链接进行提示额外信息作用的
<a href="#" title="123">链接</a>
,当鼠标放在链接上的时候用户会得到一段提示文字,可以让用户知道链接之后的内容,让他知道这个链接是否是他感兴趣的。 - alt属性对链接进行一个注释
[站外图片上传中……(2)]
,可以在里面写上图片所表达的关键词利于搜索引擎的查找,而且当图片加载失败的时候也会显示alt里面的内容,让用户知道这大概是个什么样的图片。
4.background: url(abc.png) 0 0 no-repeat;
这句话是什么意思?
答:背景图片是当前文件夹下的abc.png
坐标X轴为0 Y轴为0 而且图片不重复
例子:
5.background-size有什么作用? 兼容性如何? 常用的值是?
答:用来规定背景图像的尺寸
值 | 描述 |
---|---|
length | 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。 |
percentage | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,则第二个值会被设置为 "auto"。 |
cover | 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 |
contain | 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 |
6.如何让一个div水平居中?如何让图片水平居中?
答:div是个块级元素,只需要对他使用使用margin:0 auto
图片是一个行内元素,对它使用text-align:center
即可。
7.如何设置元素透明? 兼容性?
答:opacity设置元素透明,取值范围是0-1,0是完全透明,1完全不透明
8opacity和 rgba都能设置透明,有什么区别?
答:
opacity可以对其子元素也起作用,使子元素也变得透明。
rgba只对设置了该属性的元素有用,不影响别的元素。
本文版权归本人和饥人谷所有,转载请注明来源。