1 . CSS Sprite(雪碧图|精灵图)指什么， 及作用
就是把页面上需要用到的多个小图标全都合并在一张大图上。在使用时，利用css的背景定位(background-position)来显示需要显示的图片部分。优点是可以减少加载图片的网络请求，提高页面加载速。。
2 . img标签和CSS背景使用图片在使用场景上的区别
img标签适合使用在网页中需要变换图片，包含链接地址等地方，如轮播等等，CSS背景用在网页中图片固定不变的地方，如网页的logo，列表中的标签图片等等。
3 . title和 alt属性分别有什么作用
- title：是当鼠标移动到图面上是，显示用于描述图片的文字。
- alt的文字一般是图片内容的概括，当网络等原因造成图片无法展示时，显示alt内的文字，用户即使没看到图片也能大概知道图片是什么内容。
4 . background: url(abc.png) 0 0 no-repeat;这句话是什么意思
- url 表示图片存放的位置和图片名称，0 0是指 background-position 属性水平方向、垂直方向偏移量都为0，no-repeat 是指图片不重复。
即：把地址为abc.png的图片设置为背景图片，并从坐标0，0（左上角）开始按图片原始大小显示，不重复显示图片，只显示一张。
5 . background-size有什么作用? 兼容性如何? 常用的值是?
- 作用：规定背景图像的尺寸
- 常用的值：length, persentage, cover, contain
-
兼容性：
Paste_Image.png
6 . 如何让一个div水平居中？如何让图片水平居中
- 设置属性
margin:0 auto - 将图片的块级容器设置属性
text-align:center
7 . 如何设置元素透明? 兼容性？
- 设置属性opacity，值为0～1，1为完全显示，0为完全隐藏
-
设置rgba(0,0,0,alpha（0-1）)
兼容性：
rgba
opacity
8 . opacity 和rgba都能设置透明，有什么区别
- opacity：可以被子元素继承，文字、背景整体都会变透明。
- rgba：只对背景设置透明度，文字等其他子元素不受影响。
代码举例.png
代码举例.png
代码题 全部结合代码
9 . 使用CSS Sprite 把如下6张图标图片合并成一张图片，做出如下效果, 当 hover 时背景变色
10 . 使用字体图标(如 iconfont, 查找->加入购物车->下载 demo 、 fortawesome 或者fontello)实现上例效果
11 . 使用css border实现如下三角形参考视频-三角 & tooltip & 太极先自己思考完成，做不出来再看视频哦~
网友评论