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 而且图片不重复
例子：
搜狗截图16年07月24日1305_1.png
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只对设置了该属性的元素有用，不影响别的元素。
本文版权归本人和饥人谷所有，转载请注明来源。
网友评论