CSS常见技巧

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

CSS Sprite是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
用CSS Sprite能减少网络请求，提高页面加载速度，修改图片也更方便。

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

• 通常是非内容的图片就用background(用来修饰页面的元素)，如果是内容性的图片就用img。
• 会变动的和可点击的用img，不变的和不可点击的用background。

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

alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方。
title属性是在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了，有点类似jQuery的hover。
HTML的绝大多数标签都支持title属性，title属性就是专门做提示信息的。

title和alt

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

设置背景图片用abc.png，位置从左上开始显示不偏移，不重复。

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

作用：用来规定背景图像的尺寸。

兼容性：

background-size兼容性

常用值：

值	描述
length	设置背景图像的高度和宽度。
percentage	以父元素的百分比来设置背景图像的宽度和高度。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

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

div设置margin:0 auto可以让div水平居中。
设置父容器text-align:center可以使图片水平居中。

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

opacity和rgba都可以设置元素透明。
兼容性：

opacity兼容性 rgba兼容性

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

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

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