CSS基础知识3-雪碧图、背景及透明度设置

A、问答题

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

直白点解释就是一种CSS图片合成技术即指集合网页中的小图标或背景图像到一张图片上，然后通过CSS背景定位进行选取所需的部位，这个集成的图片就是雪碧图（或叫精灵图）；其作用是可以1、减少加载图片时对服务器请求次数；2、减少页面的加载时间；3、减少鼠标划过的一些bug；
注：

CSS雪碧调用的图默认情况下不可被打印，除非在@media中特别添加 print声明；
雪碧图合成前的图片和合成后的图片不宜太大；

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

img标签适合使用在图片内容可变的或者图片有实际内容的情况下（img里可设alt对图片进行描述）；而css背景图适合使用在图片内容固定不变比如一些小的logo或icon等等（这种情况可以采用雪碧图的方法）情况下；
注：如果一张较大的图片放在img标签中，则待该图片加载完后再加载后续的网页内容；若放在css背景图中，则待网页内容及样式全部加载完后再加载该图片，其不影响浏览网页全部内容（如果此时图片无法加载或加载失败的时候，不会有图片占用标记，不会出现红色叉）。

三、title 和 alt属性分别有什么作用？

title的作用是给链接a标签、img标签或p标签等注明额外信息用，同时它也是abbr（缩写）及acronym（首字母缩写，HTML5不支持该标签可用abbr替代）标签必不可少的属性。（当然如果它被当作标签来看待则表示页面的标题。）当这些元素使用title时，鼠标放在对应的元素上面，会出现一个工具提示文本，如下图：

title使得img出现工具提示文本.png

上述代码如下




    
    Document


这是一个a链接
![img标签出现的工具提示文本](http://upload-images.jianshu.io/upload_images/2166980-99cbc7b826de66de.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
这是段落
 HTML 语言很有趣

而alt是专门给图片进行内容描述用的（图片上是什么东西，如上面的代码中的alt="百度logo" ），这样当浏览器无法加载图片时或者当用户使用屏幕阅读器时，可以通过alt的值了解图片里的内容到底是什么。另:图片使用alt时也利于网站的SEO，便于搜素引擎爬虫识别；

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

这句话的意思是引用abc.png这样图片作为背景图，这张图片不偏移，不重复；

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

作用是设置背景图片的大小，兼容性如下图：

background-size兼容性.png

常用的值有：数字（如果有两组数字，则前者表示宽度后者表示高度，如果只有一组数字，则表示宽度，高度为auto）、百分数（以父元素的百分比来设置---- 如果有两组数值，则前者表示宽度后者表示高度，如果只有一组数值，则表示宽度，高度为auto）、contain（图片扩展至最大尺寸以使其宽度和高度正好适应内容区域即其正好被包含）、cover（把图片扩展至较大以使得图片完全覆盖内容区域，这样会导致图片部分区域未显示出来）
具体可看下面的例子代码：




    
    Document
    


这是数字表示
这是百分比表示的方法
这是contain的表示方法
这是cover的表示方法

运行结果可见：

background-size的用法.png

http://jsbin.com/gixuqe/edit?html,output

六、如何让一个div水平居中？如何让图片水平居中？

可以使用margin:数字 auto 让div水平居中；如下面代码中的margin:10px auto;使得div水平居中了；
图片水平居中可采用text-align:center; 如下面的代码中的```text-align:center``使得图片及div中的文本居中了。





定宽块状元素水平居中




我是文本，我想要在父容器中水平居中显示。
![](http://upload-images.jianshu.io/upload_images/2166980-808545378db9088f.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

运行结果见：
http://jsbin.com/hozugid/edit?html,output

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

可使用opacity属性；
兼容性如下图所示：

opacity兼容性.png

八、opacity 和 rgba都能设置透明，有什么区别？

区别是opacity不仅能够作用所对应的元素还作用在该元素内所有相关的透明度，且opacity还会继承父元素的opacity的属性；而rgba则不存在继承的情况，且其只针对元素的颜色或背景色有效；




    
    Document
    


这是opacity的div
这是rgba的div

opacity与rgba设置透明度结果对比.png

B、代码题

1、使用CSS Sprite 把如下6张图标图片合并成一张图片，做出如下效果, 当 hover 时背景变色

代码详见此处

2、使用字体图标(如 iconfont, 查找->加入购物车->下载 demo 、 fortawesome 或者fontello)实现上例效果

代码详见此处--在线版或此处--本地版

3、使用css border实现如下三角形

代码详见此处
**本文版权归本人即笔名：该账户已被查封所有，如需转载请注明出处。谢谢！ *