1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用
CSS Sprite 是一种 CSS 图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。也就是说我们生成的雪碧图在 CSS 中，通过 background-position定位图片，减少网络请求
例如我在 CSS Sprite 网站中生成了一张如下的图片：
result.png
我要在网页中实现图标 hover 点击效果，我可以通过如下代码来实现位置偏移：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
div {
font-size: 20px;
width: 85px;
line-height: 45px;
display: inline-block;
text-align: right;
cursor: pointer;
}
div:hover {
color: rgb(165, 98, 189);
}
.goon {
background: url(img/result.png) no-repeat 0px -217px;
}
.goon:hover {
background: url(img/result.png) no-repeat 0px -268px;
}
.begin {
background: url(img/result.png) no-repeat 0px 0px;
}
.begin:hover {
background: url(img/result.png) no-repeat 0px -53px;
}
.stop {
background: url(img/result.png) no-repeat 0px -107px;
}
.stop:hover {
background: url(img/result.png) no-repeat 0px -161px;
}
</style>
</head>
<body>
<div class="goon">前进</div>
<div class="begin">开始</div>
<div class="stop">停止</div>
</body>
</html>
也就是通过定位来确定图片的出现位置，您不妨一试。
优点：
- 减少加载网页图片时对服务器的请求次数
- 提高页面的加载速度
- 减少鼠标滑过的一些 bug
缺点：
- CSS 雪碧的最大问题是内存使用
- 影响浏览器的缩放功能
- 拼图维护比较麻烦
- 使 CSS 的编写变得困难
- CSS 雪碧调用的图片不能被打印
- 错误得使用 Sprites 影响可访问性
2.img 标签和 CSS 背景使用图片在使用场景上有何区别
- 对于固定不变的内容，如图标等用 CSS 背景使用图片。例如网站中万年不变的首页图标：
背景图片.png
- 对于可变的内容，图片是和内容相关联的，会时刻改变的，就用 img 标签。例如网站中首页视频推荐总会改变，而视频的图片也会随之改变：
img图片.png
3. title 和 alt 属性分别有什么作用
- alt 属性是在你的图片因为某种原因不能加载时在页面显示的提示信息，它会直接输出在原本加载图片的地方。alt属性只能用在img、area和input元素中。
我给出了如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<img src="#" alt="饥人谷">
</body>
</html>
得到的结果如下图：
alt属性.png
- title 属性是在你鼠标悬停在该图片上时显示一个小提示，像是标签批注一类的作用。title属性可以用在除了 base，basefont，head，html，meta，param，script 和 title 之外的所有标签。
我给出了如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<img src="http://cdn.joboto-public.jobtong.com/290e590c9a7c9eec22bc0b8a49723a9213dd9c9e.jpg" title="饥人谷">
</body>
</html>
得到的结果如下图：
title属性.png
4.background: url(abc.png) 0 0 no-repeat;这句话是什么意思
background属性的shorthand，其中的值是background-image、bakground-position、background-repeat三个属性的简写
- abc.png：所选的图片以及其所处的位置,接受的值是一个相对URL地址或绝对URL地址
- 0 0：图片位置的偏移,该值为左上角
- no-repeat：不重复图片，也是就只使用图片一次
5.background-size 有什么作用? 兼容性如何? 常用的值是?
作用：background-size 属性规定背景图像的尺寸。
常用的值：
- cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
- contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。使容器将图片包括其内。
- length：设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
- percentage：以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。
兼容性如图：
background-size兼容性.png
6.如何让一个div水平居中？如何让图片水平居中
- 若 div 拥有固定宽度，则直接在样式中设置
margin： 0 auto;即可。 - 若 div 没有宽度，则我们可以先将 div 表格化 设置
display: table;再设置margin： 0 auto;即可。
当然也可以对 div 设置display: inline-block;将其行内元素化，接下来我们在父级元素内设置text-align: center;即可。 - 图片居中直接设置
text-align: center;即可。
例子如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
div{
border: 1px solid black;
}
.ex1{
width: 200px;
margin:0 auto;
}
.ex2{
display: table;
margin:0 auto;
}
.ex3{
text-align: center;
}ze
</style>
</head>
<body>
<div class="ex1">我是有宽度的div</div>
<div class="ex2">我是没宽度的div</div>
<div class="ex3"><img src="饥人谷.jpg" alt=""></div>
</body>
</html>
效果如下图：
div与图片的水平居中.png
7.如何设置元素透明? 兼容性？
- 利用 opacity 属性来设置透明度。
- 兼容性： 所有浏览器都支持 opacity 属性。IE8以及更早的版本支持替代的 filter 属性。例如： filter:alpha(opacity=40)
opacity兼容性.png
8.opacity 和 rgba都能设置透明，有什么区别
rgba()和opacity都能实现透明效果
① rgba 语法：rgba(r,g,b,a)
RGBA 是在R（Red）G（Green）B（Blue）模式上增加了alpha通道，alpha通道是不透明度，如果一个元素的alpha通道数值为0%（或0），那该元素就是完全透明的（也就是看不见的，但是可以透过该元素看到该元素下的元素），数值为100%（或255）时则意味着该元素完全不透明。
② Opacity 语法：opacity: value|inherit;
value：不透明度，从 0.0 （完全透明）到 1.0（完全不透明）。
区别：
- opacity 设置的元素的后代元素会继承不透明属性。，而 rgba 设置的元素的后代元素不会继承不透明属性。
- opacity作用于元素，以及元素内的所有内容的透明度，
- rgba 只作用于元素的颜色或其背景色。
举例如下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>text</title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
div{
width: 200px;
line-height: 200px;
margin: 0 auto;
text-align: center;
font-size: 20px;
border: 2px solid yellow;
}
.rgba{
background-color: rgba(255,0,0,0.5);
}
.opacity{
background: red;
opacity: 0.5;
}
</style>
</head>
<body>
<div class="rgba">这是RGBA的测试框</div>
<div class="opacity">这是Opacity的测试框</div>
</body>
</html>
得出如下效果：
Opacity与RGBA的区别.png
我们可以看出， Opacity 属性设置的透明对 div 中的文本也有影响，而 rgba 设置并没有影响。
<strong>本文版权归作者和饥人谷所有，转载请注明出处
