雪碧图、背景、元素透明

css sprite（雪碧图|精灵图）指什么？有什么作用？

• css sprite 是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用CSS的background-position来微调需要显示的图片部分。
• 原理：控制一个层可显示区域范围的大小，通过一个窗口，进行背景图的滑动。
• 作用：多张图片合成一张有效的减小了http请求数量（每一张图片都需要加载），加速了内容的显示。

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

• img适合用于图片需要更换、大容量的图片或者需要内容提示的图片。
• css背景图适合使用在图片内容固定不变比如一些小图标等。

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

• title是当鼠标移到元素上时显示提示信息，title是一个全局的属性，不仅仅可以用在a标签里面。
• alt属性只能用在img、area和input元素中，指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。
• title与alt的区别：alt只在图像无法显示时才会显示。而用title时鼠标移动上去就会显示。

background：url（abc.png）0 0 no-repeat；这句话是什么意思？

• 这句话表示abc.png作为背景图，这张图片没有偏移且不重复。
  这分别是background的三个属性分别为：background-image，background-position，background-repeat。

• background-image用于为一个或者多个元素设置背景图片。
  语法：

background-image: none;/*表示没有背景图*/
background-image: url(abck.png);/*表示采用abck.png作为背景图*/
background-image: inherit;/*表示继承父元素的背景图*/

• background-position用于设置背景图片的初始位置。

background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
background-position: 25% 75%;
background-position: 0px 0px, center;

• background-repeat 定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。

/* 单值语法 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;
/* 双值语法: 水平horizontal | 垂直vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

例如：

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

• background-size的作用是设置背景图片大小。以下为属性值：

• auto 以背景图片的比例缩放背景图片。
• 数字：指定背景图片大小，不能为负值。若只有一个值则另一个值为auto。

background-size: 3em;/*一个值表示宽度3em，高度为auto*/
background-size: 10px 12px;/*两个值表示宽度10px，高度12px*/

• 百分比：指定背景图片相对背景区宽度、高度的百分比。若只有一个值则另一个值为auto。
• contain 缩放背景图片以完全装入背景区，可能背景区部分空白。
• cover 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。
  
  

  background-size示例

• 兼容性：IE6/7/8不支持。

  
  
  

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

• 如果div没有固定宽度，可以对div设置display: inline-block;，然后对父元素设置text-align: center;
  或者div设置display: table;，然后设置margin: 0 auto;
• 如果div是固定宽度，可以使用margin:0 auto;让div居中。
• 图片居中可以直接使用text-align: center。
  
  

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

• opacity这个属性设置。它的属性值是从0到1。0表示完全透明，中间值表示半透明，1表示完全不透明。

• 兼容性：黄色表示只有部分支持。

  
  
  

opacity和rgba都能设置透明，有什么区别。

• opacity是对一个元素的透明度。是把这个元素（包括它的内容）当成一个整体看待，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值。
• rgba则不存在继承的情况，且其只针对颜色有效。