CSS - 常见技巧

问答

---

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

答：

• 主要是把并不需要经常修改的图案（图标，logo等）合并于一张图片中，然后使用background-position这个属性来改变背景图案的位置，达到减少页面请求的需要。

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

答：

• img 标签的src属性主要适用于需要经常修改的图片内容
• css背景属性主要适用于不经常修改的图片内容

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

答：

• title用于鼠标悬停的信息提示
• alt用于图片加载失败后的内容提示
  demo

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

答：

• background-image = url(abc.png) 背景图片引用地址
• background-position = 0 0 背景图片相对于容器的原始位置（0,0）的偏移，现在的背景位置是0,0
• background-repeat = no-repeat 表示背景图片不平铺

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

答：

• background-size设置背景图片大小
• 兼容性：支持IE 8 以上的大部分浏览器（不包含IE 8），background-size兼容性
• 常用的值有：
  • cover: 依据图片的原始比例撑满整个容器
  • contain: 依据图片的原始比例使图片适应容器的宽高比显示
  • 数值或者百分比或者auto: 按照设置显示背景图片的大小
    demo

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

答：

• div居中：设置宽度的情况下， margin:0 auto
• 图片居中：父元素设置text-align:center
  demo

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

答：

• opacity:0，兼容性 ，IE8以下可以设置为filter:alpha(opacity=0)
• background:rgba(255,255,255,0) 设置rgba的第四个alpha值来控制元素的透明度，兼容性

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

答：

• 子元素会继承父元素的opacity属性
• rgba的后代元素不会继承rgba属性
  demo