CSS Sprite（雪碧图）

将多个图片合并成一张，用显示不同的部分来实现减少http请求数量，加速网页内容显示的效果。

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

• img标签作为内容的一部分来显示，方便根据不同的场景来变化
• background作为内容的背景，不能随内容而变化，不可点击

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

• title是对标签（如img，a等）的说明，当鼠标移动上去时可以看到
• alt是在图片不能显示的时候显示的替代文字，一般内容较少

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

• 使用abc.png作为背景图
• 位置偏移为（0,0）
• 不重复显示

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

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

• 兼容性：

  
  

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

• div水平居中： margin：0 auto；
• 图片水平居中：text-align：center；

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

• opacity：0；

• 兼容性：

  
  

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

• opacity：作用在元素及其所有后代上
• rgba：作用在单独的元素上

本教程版权归饥人谷和作者所有，转载须说明来源。