前端基础（问答6-2）

---

keywords: 雪碧图、img与css背景、title与alt、div水平居中、图片水平居中、元素透明。

---

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

CSS Sprite是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。这样一来，当访问该页面时，图片不会一张一张的慢慢显示出来，减少网络请求。

CSS Sprite在线工具

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

对于固定不变的内容，如图标等用CSS背景图。对于可变的内容，图片是和内容相关的，用img图片（比如验证码、用户头像、广告图片）。

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

title一般起到提示的作用。比如在img标签加属性title，当鼠标移动到图片上时，会显示文字提示。
alt是当图片无法显示时，在图片的位置用预先设定的值替代。

title

alt

-###background: url(abc.png) 0 0 no-repeat;这句话是什么意思。
这是background属性的简写，分别是:

background-image:url(abc.png)  规定背景图像的路径abc.png;
background-position:0px 0px;     规定背景图像的位置、偏移量；
background-repeat:no repeat;     规定背景图像不重复;```

- ###background-size有什么作用? 兼容性如何? 常用的值是?
background-size规定背景图片的尺寸。常用的值：

cover :把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域；
px ：给背景图片指定宽高；
百分比 ：原图像大小的倍数```

background-size

2016-06-18_10-52-15.png

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

div水平居中：对该div使用margin:0 auto;
图片水平居中：对上一级的块级元素使用text-align:center;

2016-06-18_11-28-41.png

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

对元素使用样式属性opacity。

2016-06-18_11-04-25.png

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

opacity是对元素加透明度（可以是文本、图像、背景色），而rgba是对元素加颜色（在此基础上可以调节透明度）。