CSS认识5

• CSS Sprite(雪碧图|精灵图)指什么? 有什么作用
  是指把所需要的较小的背景图片合成一张来使用的技术。这样可以压缩图片，图片的总体大小变少，加载的请求变少。

---

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

img适合做图文混排的场景

Paste_Image.png

css背景适合做图片映衬文字的场景

Paste_Image.png

css背景还可以运用在需要做自适应的场景当宽度不够的时候可以居中部分

Paste_Image.png

图片无法做始终居中展示 (或者我不会)

Paste_Image.png

---

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

title在鼠标悬浮停留时候会出现文字提示

Paste_Image.png

atl在图片链接打不开的时候会替换成文字提示

Paste_Image.png

---

• background: url(abc.png) 0 0 no-repeat;这句话是什么意思
  背影图引用abc.png图片 水平方向0 垂直方向0 的位置（最左上角） 不平铺

---

• background-size有什么作用? 兼容性如何? 常用的值是?
  设置背景图片的尺寸
  从ie9开始支持 其他浏览器兼容性还可以
  length 背景图片的宽和高

background-size:100px 100px;

Paste_Image.png

percentage 基于父元素的百分比来设置背景图的宽和高(25%就是平铺四次)

background-size:25% 25%

Paste_Image.png

cover 背景图完全填充整个区域（等比例填充，过大的地方会看不到）

background-size:cover

Paste_Image.png

contain 背景图宽和高完全适应区域（不够的会平铺）

background-size:contain

Paste_Image.png

---

• 如何让一个div水平居中？如何让图片水平居中
  给要居中的元素加一个

margin:0 auto;

给图片的父元素加一个

text-align:center;

Paste_Image.png

---

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

opactiy:0.5; 

rgba(0,0,0,0.5)

opactiy ie9以下部分兼容

rgba ie 9以下不兼容

---

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

设置opactiy 该元素里面所有东西都透明

设置rgba只有设置的颜色变透明

Paste_Image.png

本教程版权归菲龍探雲和饥人谷所有，转载须说明来源