1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用
- CSS Sprites是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
- CSS Sprites的原理其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
作用
- 利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能
- CSS Sprites能减少图片的字节，例如3张图片合并成1张图片的字节总是小于这3张图片的字节总和
- CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
- 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便
2.img标签和CSS背景使用图片在使用场景上有何区别
img标签一般用于可以点击跳转链接或者可以个性化定制改变（如登陆头像）的图片，css背景一般是固定不变的内容（如logo），点击后不会跳转到新页面
css背景一般用于静态不变的图片。可以是页面LOGO等。
3.title 和 alt属性分别有什么作用
- title 属性规定关于元素的额外信息,这些信息通常会在鼠标移到元素上时显示一段提示文本
title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息 - alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本
当图片无法显示时，就会变成下面这个样子：
4.background: url(abc.png) 0 0 no-repeat;这句话是什么意思
设置图片abc为背景图片，位置为x轴方向0px，y轴方向0px（左上角是 0 0），不重复图片
5.background-size有什么作用? 兼容性如何? 常用的值是?
background-size描述背景图片的大小，它的类型可以是像素（px）、百分比（%）或是auto，还可以是cover和contain。第一个值为背景图width，另外一个值用于指定背景图上的height，如果只设定1个值，则第2个默认为auto，但当值为cover和contain时除外。
- cover：
div {
width: 200px;
height:200px;
border: 1px solid red;
background: url(1.jpg) 0 0 no-repeat;
background-size: cover;
}
保持图像的宽高比例，将图片缩放到正好完全覆盖定义的背景区域，其中有一边和背景相同。
- contain：
div {
width: 200px;
height:200px;
border: 1px solid red;
background: url(1.jpg) 0 0 no-repeat;
background-size: contain;
}
保持图像的宽高比例，将图片缩放到宽或者高正好适应定义背景的区域，但背景仍在定义的区域之内，被包含。
- length:
div {
width: 200px;
height:200px;
border: 1px solid red;
background: url(1.jpg) 0 0 no-repeat;
background-size: 130px 180px;
}
这里为背景图片设置宽高，图片会直接被拉伸或缩放，不保持原来的比例。如果只设置一个数值，另外一个值默认为auto，它将按图片原比例来伸缩。
- percentage:
div {
width: 200px;
height:200px;
border: 1px solid red;
background: url(1.jpg) 0 0 no-repeat;
background-size: 50% 50%;
}
这里需要特别注意一下，图片大小不是按背景图片大小的百分数来计算的，而是装载背景图的元素的百分比来计算。
6.如何让一个div水平居中？如何让图片水平居中
- div水平居中
div {
margin: 0 auto;
}
- 图片水平居中
给图片的父级设置text-algin:center样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style media="screen">
div{
width: 800px;
height: 600px;
border: 1px solid red;
text-align: center;
}
</style>
</head>
<body>
<div class="img">
</div>
</body>
</html>
图片水平居中
7.如何设置元素透明? 兼容性？
1.使用rgba：rgba(red, green, blue, alpha)。
2.设置opacity：0~1
8.opacity 和 rgba都能设置透明，有什么区别
opacity作用于元素内的所有内容，rgba作用于元素的颜色或背景色
网友评论