css常见技巧

CSS Sprite(雪碧图|精灵图)
雪碧图是把多个背景图片合成一张，通过background-position定位图片，减少网络请求。
雪碧图的作用是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。

sprite在线工具：http://csssprites.com/

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

• 对于固定不变的内容，如图标、栏目背景、图片按钮等用背景图;
• 对于可变的内容，图片是和内容相关的（如广告、商品展示、用户头像等需要改变的），用图片。

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

• title是鼠标滑过时显示的文字提示
• alt是图片在无法显示时用于代替图片显示的文字，利于搜索引擎优化

background-size

• background-size用于设置背景图片的大小

• 兼容性

  
  

• 常用值
  <bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

• <length>值，指定背景图片大小，不能为负值。

• <percentage>值，指定背景图片相对背景区（background positioning area）的百分比。

• auto以背景图片的比例缩放背景图片。

• cover缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。

• contain缩放背景图片以完全装入背景区，可能背景区部分空白。
  /* 关键字 /
  background-size: cover; /缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。/
  background-size: contain; /缩放背景图片以完全装入背景区，可能背景区部分空白。*/

    /* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
    background-size: 50%;
    background-size: 3em;
    background-size: 12px;
    background-size: auto;
  
    /* 两个值: 第一个值指定图片的宽度，第二个值指定图片的高度 */
    background-size: 50% auto;
    background-size: 3em 25%;
    background-size: auto 6px;
    background-size: auto auto;
  
    /* 逗号分隔的多个值：设置多重背景 */
    background-size: auto, auto;     /* 不同于background-size: auto auto */
    background-size: 50%, 25%, 25%;
    background-size: 6px, auto, contain;
  
    background-size: inherit; /*默认*/
  

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

• div水平居中：设置margin: 0 auto;
  div水平居中一定要设置div的宽度
  
  
• 图片水平居中：
  将img放在div内，设置div的text-align: center;
  
  

如何设置元素透明?
设置元素透明度：opacity：0~1
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
兼容性

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

• opacity设置元素透明：元素里面的所有内容都透明
• rgba设置元素背景色透明：只是背景颜色透明，其他不透明