一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用
css sprite（雪碧图），图片合并在线工具可以合成图片。把很小的图片合成一张大图。主要是一个小图片就发一个网络请求，图片过多，浪费网络资源，网页卡，通过合并一张图片，再通过background-position进行设置，减少网络请求，使得页面加载更快。
为了减少页面加载次数，也可以把图片转base 64,直接把图片变成数据，直接放在css中background:url(里面)没有网络请求，只不过CSS会变大，只适用于非常非常小的图标
二、img标签和CSS背景使用图片在使用场景上有何区别
1、img标签是html标签，css的背景图片是样式。
2、css背景图片是多用于网页上不变的内容，比如购物车这种小icon,一般用背景图片多；而背景图是可变内容的时候，或者需要点击的，用的是img。比如各大购物网站，买家的头像。
3、二者表述方式不一样background:url();而<img src=""/>
三、title和alt属性分别有什么作用
title是标题，当鼠标悬浮在元素呢上面显示的，alt是在图片不能正常打开的时候，显示的提示信息
四、background: url(abc.png) 0 0 no-repeat;这句话是什么意思
引用abc.png作为背景图片，并且背景图片不偏移，在父容器的左上角，且不重复
五、background-size有什么作用? 兼容性如何? 常用的值是?
background-size:设置图片大小，使得图片和父容器完美展示。
常用值为：
1、length(数值)。background-size:30px 30px（图片的宽度和高度）
2、percentage（百分比）。background-size:100%(50%)可以用来设置背景图片缩放与否。
3、background-size:cover（图片可以整个容器覆盖到）
4、background-size:contain(不管容器设置多大，图片多大，可以把图片包括进去，不会随着容器变大而变大)
六、如何让一个div水平居中？如何让图片水平居中
行内元素和图片：水平居中，用text-align:center
块级元素：水平居中margin:0 auto;或者用margin-left:auto;margin-right:auto;
七、如何设置元素透明? 兼容性？
背景色透明和整体透明，如果让div透明，是里面包含所有东西会透明。
新版本中img{opacity:0.5}，opacity取值0-1；IE8及更早版本语法为img{opacity:0.5;filter:alpha(opacity=0.5)}
更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小，越透明
八、opacity和rgba都能设置透明，有什么区别
opacity设置的透明，子元素会继承。rgba设置的透明，子元素不会继承
网友评论