一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用
雪碧图：将多个小的icon合成一个大图，通过css设定不同的定位与偏移显示大图不同的区域；
作用：减少网络请求，也就减少了网络资源的消耗，也就减少了网页响应时间；
二、img标签和CSS背景使用图片在使用场景上有何区别
img标签：常用于图片不固定，随时可能出现更新，如qq头像、动态日历、首页产品展示图等等；
CSS背景图片：常用于固定的图片或背景的，一般不会改变，如功能图标、指示箭头等等；
三、title 和 alt属性分别有什么作用
alt属性：链接的图片因为某种原因不能加载时在页面显示的提示信息，提示信息显示在原本加载图片的地方；
title属性：鼠标悬停在该图片上时显示一个小提示，鼠标离开就消失；
四、background: url(abc.png) 0 0 no-repeat;这句话是什么意思
background：url(abc.png) 0 0 no-repeat;：用于申明背景图片属性
url(abc.png)：用于声明使用abc.png作为背景图片；
0 0：用于声明图片水片和垂直偏移都为0px；
no-repeat：声明图片不进行重复填充；
下图为实例：
background属性
五、background-size有什么作用? 兼容性如何? 常用的值是?
作用：设置背景图像的尺寸；
兼容性：
background-size兼容性
常用的值：数值、百分比、cover、contain，实例如下图
background-size值实例
六、如何让一个div水平居中？如何让图片水平居中
div水平居中:为div添加margin: 0 auto声明；
图片水平居中:为该图片的父容器添加text-align:center声明；
实例如下图：
div和img图片居中
七、如何设置元素透明? 兼容性？
元素透明：为元素添加opacity：0~1(0为完全透明,1为不透明)声明
兼容性如下图：
opacity兼容性
八、opacity 和 rgba都能设置透明，有什么区别
1. 语法区别：
opacity使用语法：opacity: value|inherit;/*value:0~1，0为完全透明，1为完全不透明*/
rgba使用语法：rgba(r,g,b,a)/*a:0~1，0为完全透明，1为完全不透明*/
2. 属性区别：
使用opacity属性时后代元素会继承父元素的 opacity 属性，使用rgba属性值时后代元素不会继承不透明属性，实例如下图：
opacity和rgba属性区别
九、代码题
- 使用CSS Sprite 把如下6张图标图片合并成一张图片，做出如下效果, 当 hover 时背景变色：
答：代码9-2-1 - 使用字体图标(如 iconfont, 查找->加入购物车->下载 demo 、 fortawesome 或者fontello)实现上例效果
答：代码9-2-2
3.使用css border实现如下三角形
答：代码9-2-3
声明：本博客版权归兰文聪和饥人谷所有，转载需说明来源！
网友评论