任务9- CSS常见技巧

---

2016/05/18

---

@hunger 说：

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

主要是指将多个小图标合成为一张大图，通过对background-position的设置显示不同的图标，从而减少网络请求，只用加载一张图片，再用到的时候是用缓存的方式

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

img一般用在内容可变的，经常更换的地方，比如轮播图，css背景图一般用在内容固定的地方，比如一个网站的logo图

0_1463325996297_upload-6a8412cf-0c7f-474f-ae18-2fe2da794600

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

title属性是给链接文字提示和当鼠标悬停在图片上出现的文字提示，alt属性是当图片加载失败时，出现的提示

0_1463326560300_upload-1ff030b9-e948-4ae9-acf8-f05f6e9b78bf

0_1463326741774_upload-df22fbd5-6642-44a6-9670-d8a452850392

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

意思是背景图是为abc.png的图片，在水平方向和垂直方向上偏移量为0，图片不重复

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

• background-size用于设置背景图片的尺寸。

• 兼容性：

  
  
  

  0_1463360530778_upload-95d52c08-9109-4288-96c3-690bc33f4c41

常用的值有background-size: length|percentage|cover|contain;

• length:设置背景图像的宽度和高度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，第二个值会被设置为auto。

  
  
  

  0_1463409750211_upload-deba3a66-0203-4d47-ab6b-3048d591bada

• percentage:以父元素的百分比来设置背景的宽度和高度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，第二个值会被设置为auto

  
  
  

  0_1463409812406_upload-10df1258-e9b1-40a5-a562-c3948fd4bfeb

• cover:把背景图像扩展至足够大，使背景图完全覆盖背景区域。背景的某些部分也许无法在背景定位区域内。

  
  
  

  0_1463409900017_upload-6aa8e3c6-68a1-46f0-8276-64b0c014dcd9

• contain:把背景图像扩展至最大尺寸，是其宽度和高度完全适应内容区域。

  
  
  

  0_1463410037639_upload-e7bb4bf6-35a6-4f45-8ae0-613d98e081e7

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

让div水平居中，可以用margin:0 auto;
让图片水平居中，可以用text-align:center;

0_1463410534039_upload-bb77b0a8-f04a-41b0-be57-98149ffad5d7

0_1463410556617_upload-932a47aa-0142-4771-bb57-3fa55db404ba

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

兼容性：

0_1463413284843_upload-a8a9d544-3068-4229-bc1e-a7311a98ff6e

opacity:0~1;
filter:alpha(opacity=0~100);(对于IE8和更早的版本)

0_1463411373945_upload-17a41552-e3f1-4131-8850-fdc9f2280a52

0_1463411434039_upload-89046460-841b-423a-99a2-f9e39d5ce3d7

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

• opacity设置透明，整个容器都会变透明，包括其中的文字，图片都会透明
• rgba只是背景颜色透明，但是其中其他的元素还在正常显示的
  
  

  0_1463413050012_upload-bb680e90-771d-4012-b5d9-2ed5fe63f118
  
  代码链接