1. CSS Sprite(雪碧图|精灵图)指什么? 有什么作用?
- CSS Sprite指的是一种CSS图像合并技术，是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
- 作用:雪碧图的应用可以减少网站的HTTP请求数量，提升网站加载性能，对内存和带宽更加友好，提高用户体验度。
2. img标签和CSS背景使用图片在使用场景上有何区别?
- 对于固定不变的内容，如图标等用css背景图。对于可变的内容，图片是和内容相关的，用img标签；
3. title 和 alt属性分别有什么作用?
- alt属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方，而title属性是在你鼠标悬停在该图片上时显示一个小提示，鼠标离开就没有了。
4. background: url(abc.png) 0 0 no-repeat;这句话是什么意思?
- 插入一张背景图为abc.png的图片，横纵位置都不偏移，图片是不重复的；
5. background-size有什么作用? 兼容性如何? 常用的值是?
- background-size规定背景图像的尺寸;
-
兼容性:
- 常用的值：
- background-size:cover;把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
- background-size:contain; 把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
6. 如何让一个div水平居中？如何让图片水平居中?
- div水平居中：
设置宽度然后用margin: 0 auto;属性； - 图片水平居中
- 1.在不设置宽度和高度的情况下因为img是行内元素，所以先变为块级元素,用display:block; margin:0 auto;这两个属性一起使用才可以;
- 2.给图片添加一个父容器，在图片的父容器上设置text-align:center;属性就能使图片水平居中；
7. 如何设置元素透明? 兼容性？
-
通过opacity：0~1设置元素透明;它的属性值1表示完全不透明，0表示完全透明。可用以下方法补充：filter: alpha(opacity=0~100); background: rgba（255,0,0,0~1）来设定，其值越靠近0越透明;
-
兼容性如下:
8. opacity 和 rgba都能设置透明，有什么区别?
- opacity设置透明，子元素会继承，会使整体都透明;
- rgba子元素则不会继承,一般用于设置背景的透明度;
网友评论