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

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的background-image，background- repeat，background-position的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
作用：利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.clock{
width:120px;
height:110px;
background-image:url(http://img.taopic.com/uploads/allimg/140622/234915-1406221T51398.jpg);
}
.s1{background-position:-15px -10px;
```
    }
    .s2{background-position:-15px -120px;
    }
    .s3{
    background-position:-15px -230px;
    }
    .s4{
    background-position:-15px -330px;
    }
</style>
</head>
<body>
  <div class="clock s1"></div>
  <div class="clock s2"></div>
  <div class="clock s3"></div>
  <div class="clock s4"></div>
</body>
</html>
```

代码

效果

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

img标签适合图片内容会变化，如点击会跳转
CSS背景则适合图片内容基本不会变化的

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

title 属性规定关于元素的额外信息。
这些信息通常会在鼠标移到元素上时显示一段工具提示文本
alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

这是刘亦菲
```
  [站外图片上传中……(2)]

</body>
</html>
```

效果

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

background的属性值含义依次为背景图片（括号里面是图片地址）、坐标（X轴、Y轴）、是否要重复（当图片不够填满整个容器时，会默认重复显示图片，直到填满容器为止）。
background-position：默认左上角
X轴向右为负，Y轴向下为负
只写一个单位，则默认为X轴，Y轴居中
[top | center | bottom] [left | center | right]
x% y%
background-repeat
no-repeat：背景图片在规定位置
repeat-x：图片横向重复
repeat-y：图片纵向重复
repeat：全部重复

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

background-size 属性规定背景图像的尺寸。
length
设置背景图像的高度和宽度。
设置多重背景，可以设置用逗号分隔的多个值。

值	描述
length	第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
percentage	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。类似于图像为容器
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <style>
        .img{
        width:200px;
        height:200px;
        border:1px solid black;
        background:url("http://ent.taiwan.cn/mlkp/201606/W020160628393199389482.jpg" ) no-repeat;
        display:inline-block;
      }
        .length{
          background-size:100px;
        }
      .percentage{
      background-size:70%;
      }
      .cover{
      background-size:cover;
      }
      .contain{
      background-size:contain;
      }
    </style>
  </head>
  <body>
  <div class="img length"></div>
    <div class="img percentage"></div>
    <div class="img cover"></div>
    <div class="img contain"></div>
  </body>
  </html>

代码

效果

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

div水平居中（块级元素）: margin: 0 auto
图片水平居中（行内元素）:display: table-cell;text-align: center
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.img{
width:400px;
height:400px;
border:1px solid black;
display:table-cell;
text-align:center;/水平居中/
vertical-align:middle;/垂直居中/
}
</style>
</head>
<body>
<div class="img">

</div>
```
</body>
</html>
```

效果

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

opacity：0~1
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
rgba：rgba(red, green, blue, alpha)
alpha 参数是介于 0.0（完全透明）与 1.0（完全不透明）的数字。