CSS Sprite(雪碧图|精灵图)指什么? 有什么作用?
为了提高网页的性能，减少加载次数（减少http请求次数），将一些不会经常随网站内容变化的小图标，集中放在一张大图上，将这个图应作为background-image 嵌入页面中，在需要相关图标时，根据background-position设置坐标值，达到目的。这张集中了网站小图标的大图就是CSS 雪碧图。
img标签和CSS背景使用图片在使用场景上有何区别？
使用css背景的场景：
- 图片不会因用户不同而显示不同。
- 图片不需要经常变动。
3.如果需要为不同的屏幕分辨率展示不同的图像使用 media查询时使用backgrond-image。
使用img标签的场景： - 如果图形是内容的一部分，使用Img标签加上alt属性。
- 如果你依赖于浏览器缩放图像比例并且可以呈现不错的效果时使用IMG。
- 如果配合 z - index 伸展背景图像来填补它的整个窗口时使用IMG。
- IMG会首先加载因为src在html文件本身中而在有背景图像源是样式表中引入的图像，加载样式表加载后,延迟加载的网页。
title和alt属性分别有什么作用?
两者区别及作用：
- ** 含义不同 **alt是当图片不存在时的替代文字;title是对图片的描述与进一步说明。
- ** 在浏览器中的表现不同 ** 在firefox和ie8中，当鼠标经过图片时title值会显示，而alt的值不会显示;只有在ie6中，当鼠标经过图片时title和alt的值都会显示。
- ** SEO优化 ** 搜索引擎对图片意思的判断，主要靠alt属性。
background: url(abc.png) 0 0 no-repeat;这句话是什么意思？
url 指背景图引用地址
0 0 指背景图左上角被引用的坐标
no-repeat 指背景图不重复铺设
background-size有什么作用? 兼容性如何? 常用的值是?
background-size 属性规定背景图像的尺寸。
background-size兼容性
background-size: length|percentage|cover|contain;
- length 设置背景图像的高度和宽度。如果只设置一个值，则第二个值会被设置为 "auto"。
- percentage 以父元素的百分比来设置背景图像的宽度和高度。
- cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
-
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
background-size区别
如何让一个div水平居中？如何让图片水平居中?
div 水平居中
E{ margin : 0 auto ;}
图片水平居中，在其块级父元素中设置:
div { text-align：center；}
如何设置元素透明? 兼容性？
一般隐藏一个元素，多会设置opacity：0%，这样绑定在这个元素上的事件仍然有效。
opacity兼容性
opacity和rgba都能设置透明，有什么区别?
opactiy可以应用于图片和文字。
RBGA只能表示背景的不透明度。
opactiy和rgba区别
opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。
原理详见：RGBA与Opacity差异小解
网友评论