CSS常见技巧

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

1. CSS雪碧 即CSS Sprite,也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图像和背景图片合并到一张图片上，然后利用css的背景定位来显示的图片部分。

2.作用：

• 减少加载网页图片时对服务器的请求次数；
• 提高页面的加载速度；
• 减少鼠标滑过的一些bug.
  二、img标签和CSS背景使用图片在使用场景上有何区别？
  如果一张图片是网页内容的一部分，就该用img,否则建议用CSS背景图。要注意logo是否属于网页内容的一部分。
  示例：
  
  
  
  如图：百度logo就是img，二维码就是CSS背景图呈现出来的。
  在网页加载过程中，以CSS背景图存在的图片会等到结构加载完成之后开始加载，而html中的标签img是网页结构的一部分，会在加载结构的过程中加载，如果引入一个很大的图片，在图片下载完成之前，img内容都不显示。但是CSS引入同样的图片，网页内容和结构加载完成，才开始加载背景图片，不会影响用户浏览网页内容。
  三、title和 alt属性分别有什么作用？
  alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个应为字符或者用户必须保证替换文字尽可能的短。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。
  title属性为设置该属性的元素提供建设性的信息。使用title属性提供非本质的额外信息。
  四、background: url(abc.png) 0 0 no-repeat;这句话是什么意思？
  background:url(abc.png) 0 0 no-repeat;设置了背景图片的属性：
  background-img:url(abc.png)指定要使用的背景图片;
  background-position:0 0:指定背景图片的位置；
  background-repeat:no-repeat:指定背景图片仅显示一次。
  示例：
  
  
  
  五、background-size有什么作用? 兼容性如何? 常用的值是?
  background-size:用于控制背景图片的大小。
  兼容性：

浏览器	background-size
Firefox 3.6, Firefox 4	支持
Chorme10	支持
IE6，IE7，IE8	不支持
IE9	支持
Opera10,Opera11	支持

常用的值是：

• auto:此值为默认值，保持背景图片的原始宽度和高度；
  示例：

• :用于给background-size一个具体的值；
  示例：

  
  
  
  
  

  其中第一个值是给背景图片添加了宽度；第二个值是给背景图片添加了高度值

• 
  示例：

  
  
  

• cover:图片会放大到适合容器的尺寸
  示例：

  
  
  

• contain
  示例：

  
  
  
  
  

  六、如何让一个div水平居中？如何让图片水平居中？
  使得div水平居中使用margin:0 auto;示例：

  
  
  
  
  图片水平居中：
  在它所在的块级元素中添加text-align:center;
  示例：
  
  
  
  

  七、如何设置元素透明? 兼容性?
  可以使用：

• css3的opacity:x,x的取值从0-1
• css3的rgba(red green blue alpha),alpha的取值从0-1
  兼容性：
  opacity

浏览器	兼容性
IE6,7,8	不支持
IE9,10,11	支持
chrome2.0.x	支持
Firefox3.0.10,3.5	支持

rgba

浏览器	兼容性
IE6,7,8	不支持
IE9,10,11	支持
chrome2.0.x	支持
Firefox3.0.10,3.5	支持

八、opacity和 rgba都能设置透明，有什么区别？
opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。
示例：

参考：

1. CSS background-repeat 属性
2. CSS background 属性
3. When to use IMG vs. CSS background-image?
4. 翻译 – CSS3 Backgrounds相关介绍
5. CSS3 Background-size

注：版权归本人所有，若有转载请注明来源