1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用
雪碧图指很多张图片合成一张图片,作用是在html使用时,减少不必要的网络请求,只要加载一个网络请求,调整图片的位置就能获得图片。。
2.img标签和CSS背景使用图片在使用场景上有何区别
img标签是一个块元素,如果这个图片与其他内容有相关联的则需要img标签
css背景使用图片是图片固定不变的情况下使用的,而且只是一个css样式。
3.title和 alt属性分别有什么作用
title的作用只是提供标签的额外属性,如<img src="xxx" alt="测试" title="text"> 当鼠标指着xxx图片时会出现text的提示,作额外解释作用。
alt则是 当<img src="xxx" alt="测试" title="text"> 中的图片由于网络问题无法显示时 图片框里就会出现测试字样,也就是图片加载失败的时候,该文本就会替换为标签所设置的文字
4.background: url(abc.png) 0 0 no-repeat;这句话是什么意思
1.背景图为abc.png
2.背景位置为0 0 也就是向右以0 向下以0偏移
3.no-repeat的意思是图片在框架上不会重复出现,也就是不平铺。
5.background-size有什么作用? 兼容性如何? 常用的值是?
调整背景的大小。
常用的值有:
cover:将图片覆盖整个区域(取决于你样式的大小)
contain:图像扩展到合适的区域
length : 自定义宽高调整图片
percentage: 以百分比形式调整图片
兼容如下图:
6.如何让一个div水平居中?如何让图片水平居中
1.text-align:center 因为div是块级元素 可以让块级元素内的行内内容居中
2.margin: xxpx auto; 可以让整个div居中
3.margin-left: auto;
margin-right: auto
图片的话最好用display:block转变为块级元素,然后使用margin: 0px auto;或者margin-left margin-right:auto居中
7.如何设置元素透明?兼容性?
opacity:0.x 0是完全透明
兼容性:
8.opacity和 rgba都能设置透明,有什么区别
opacity可以设置整个元素透明
rgba只是元素的背景颜色透明 就是倘若这个元素中有文字 文字并不会透明