1、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用
-
简介
CSS Sprites(雪碧图|精灵图)是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。 -
作用
利用CSS Sprites能很好地减少了网页的http请求次数，从而大大的提高了页面的性能,节省时间和带宽。 -
缺点
CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内不会出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；幸好腾讯的鬼哥用RIA开发了一个CSS Sprites 样式生成工具，虽然还有一些使用上的不灵活，但是已经比photoshop测量来的方便多了，而且样式直接生成，复制，拷贝就OK！CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。 -
注意点
CSS Sprites非常值得学习和应用，特别是页面有一堆ico（图标）。总之很多时候大家要权衡一下利弊，再决定是不是应用CSS Sprites。
2、img标签和CSS背景使用图片在使用场景上有何区别
对于固定不变的内容，如图标等用背景图。对于可变的内容，图片是和内容相关的，用图片
Paste_Image.png
Paste_Image.png
3、title和 alt属性分别有什么作用
title是一个全局属性，主要是为元素增加一个小提示或者注释，当鼠标hover到这个有title
属性的元素时，title的值会在鼠标的旁边显示出来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
.content{
}
</style>
</head>
<body>
<div class="content" title="哈哈">
测试title
</div>
</body>
</html>
Paste_Image.png
alt
主要是当图片无法加载的时候用来替代图片的文字内容。
Paste_Image.png
4、background: url(abc.png) 0 0 no-repeat;这句话是什么意思
这句话是一个background属性的简写方式，其中对应的值是background-image、bakground-position、background-repeat。
background-image可以为背景引入背景图片，接受的值是一个相对URL地址或绝对URL地址
background-position可以指定背景图片的初始位置，其中0 0表示的是左上角
background-repeat表示的是背景图片是否重复，默认的值是repeat
-
background: url(abc.png) 0 0 no-repeat;效果
Paste_Image.png
-
background: url(abc.png) 20px 20px repeat;效果
Paste_Image.png
5、background-size有什么作用? 兼容性如何? 常用的值是?
- background-size是指定背景图片的大小
- background-size是CSS3的属性
Paste_Image.png
background-size常用的值:length|percentage|cover|contain;
| 值 | 描述 |
|---|---|
| length | 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 |
| percentage | 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 |
| cover | 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 |
| contain | 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 |
6、如何让一个div水平居中？如何让图片水平居中
- div居中
如果设置div宽度，可以直接设置margin: 0 auto;
Paste_Image.png
如果不设置div宽度
div设置display: inline-block;，然后对父元素设置text-align: center;
或者div设置display: table;，然后设置margin: 0 auto;
Paste_Image.png
Paste_Image.png
- 图片水平居中
text-align: center;
7、如何设置元素透明? 兼容性？
- 通过opacity: 0;不透明度这个属性来设置，它的属性值0表示完全透明,1表示完全不透明。
-
兼容性
Paste_Image.png
8、opacity 和 rgba都能设置透明，有什么区别
opacity是对元素设置透明度，可以对任何元素进行设置。
rgba是通过颜色alpha通道来设置颜色的透明，只能针对颜色。eg：背景颜色，字体颜色，边框颜色等颜色属性
** 本教程版权归作者和饥人谷所有，转载须说明来源！ **
网友评论