CSS常见技巧

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

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

雪碧图指的是把多个网页所需要的图标合成在一个图片上，这样浏览器只需要加载一张图片，通过样式background-position定位读取不同的位置就可以显示不同图标，而不需要加载多张图片，减少网络请求，增加网页效率。

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

img标签适合使用在网页中需要变换图片，包含链接地址等地方，如轮播等等，CSS背景用在网页中图片固定不变的地方，如网页的logo，列表中的标签图片等等。

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

• title：当鼠标悬停在图片上时，显示的提示文字信息
• alt：当图片无法正常显示时，显示的替换文字信息，提高了网页的友好性和可读性

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

把地址为abc.png的图片设置为背景图片，并从坐标0，0（左上角）开始按图片原始大小显示，不重复显示图片，只显示一张。

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

• 作用：规定背景图像的尺寸
• 常用的值：length, persentage, cover, contain
• 兼容性：

background-size

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

• 设置属性margin:0 auto
• 将图片的块级容器设置属性text-align:center

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

• 设置属性opacity，值为0～1，1为完全显示，0为完全隐藏
• 设置rgba(0,0,0,alpha（0-1）)
  兼容性：

rgba

opacity

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

opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。