CSS常见技巧

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

CSSSprites是一种网页图片应用处理方式。它是作用是将一个页面涉及到的所有零星图片都包含到一张大图中去，减少向服务器发送的请求，提高了页面的性能。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。

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

• img标签是html的标签，他是具有语义化的标签;而CSS背景图片是CSS的一种样式起装饰作用
• img标签用于呈现网页实质内容;background-image一般用于网站不变的内容,如一些icon

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

• title属性规定关于元素的额外信息,用于链接的描述。当鼠标移至元素时，会显示一段事先设定好的提示文本。
• alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。也可在 鼠标移至图像上是显示描述。

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

设置abc.png为背景图片,不发生偏移(图片位于元素左上角),不产生平铺效果。

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

• background-size规定背景图片的尺寸

• 兼容性如下图:

  
  
  

  background-size.png
• 常用的值有

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

Background-size各属性演示

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

• div的水平居中可设置左右外边距为auto实现,例如:margin: 10px auto;
• 图片水平居中可在父容器中设置text-align:center;实现
  
  

  水平居中.png

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

opacity：0~1,兼容性如图:

opacity.png

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

opacity作用于整个标签内的元素,包括文字图片等等;而rgba只是颜色的一个参数而已。

两种透明度区别.png