CSS常用技巧

CSS Sprite(雪碧图|精灵图)

• 雪碧图指的是将一些较小的图标或其他小图片集合到一起成为一张大图，只需一次网络请求，在呈现时只需要用区块视窗和position搭配显示需要的图标，避免重复的网络请求减少资源损耗缩短等待时间。

img标签和CSS背景的区分

• img标签一般用于需要链转(用a链接包裹)或需要改变图片的场景使用；
• 而对于部分仅仅是呈现视觉效果，如小装饰、标志等基本固定不变的场景一般使用CSS背景图。

title和alt属性的作用

• title是a标签中对于将要跳转过去的页面的内容做一个概述、提示；alt属性是img标签中当因为网络状况不佳或因其他原因导致图片无法加载时，代替图片用文字说明图片内容。

background: url(abc.png) 0 0 no-repeat;的含义

• 意思是加载一个背景图，地址是当前目录下的abc.png，其水平位置和垂直位置为0px(相对左边和上边的偏移量为0)，图片不重复显示。

background-size的作用

• 可以来调整背景图的大小；IE8及一下版本不支持，opera mini 8部分支持，其他浏览器支持；
• 常用的值有XXpx XXpx直接指定图片大小;XX% XX%设定相对于视窗区块的百分比大小;contain将图片进行缩放，直至视窗能完整显示图片的最大大小；cover将图片进行缩放，直至图片能完全覆盖视窗的最小大小。

让一个div水平居中，让图片水平居中

• 让div元素的左右margin相等，即margin：0 auto(要有doc);
• 用一个div块级元素去包裹这个图片，再用text-align:center让块元素里的图片居中。

元素透明度的设置

• 可以使用opacity:0~1来设置元素的不透明度；IE8部分支持，其余浏览器支持此属性，IE8及更老版本可使用filter:alpha(opacity=0~100)来达到一样的效果。
• 对于部分可以设置颜色的元素可以使用rgba设置颜色，其中的a即alpha设置0.0~1.0来确定元素颜色不透明度也就达到了设置元素不透明度的目的；IE9以上及其他浏览器都支持rgba。

opacity 和 rgba在透明度设置上的区别

• opacity是直接设置元素的透明度泛用性更强，而rgba是针对部分可以设置颜色的元素通过改变颜色的透明度来让元素也达到透明的效果。