css常见技巧

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

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

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

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

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

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

• background-size

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

  • 兼容性

    
    
    

  • 常用值
    = [ | | auto ]{1,2} | cover | contain

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

  • 值，指定背景图片相对背景区（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设置元素背景色透明：只是背景颜色透明，其他不透明