1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用
- 雪碧图指的是把一个网页上需要用到的多张图片整合到一张图片上，通过background-image引入整合过的图片中background-position来显示你需要的某个图像。
- 一个网页上需要用到大大小小的图片太多了，每张图片都需要通过网络请求来下载到你的电脑，最终显示在浏览器上。多用户的大量的请求给服务器造成压力，直接影响网页渲染和用户体验。雪碧图通过将多张图片整合成一张，减少了图片下载的网络请求，同时将网页上固定的一些logo整合在一起，也方便代码的后期维护。
工具链接 -
如下图： 将多张图片整合成一张，自动生成css样式，通过background-position值来定位。
Paste_Image.png
Paste_Image.png
2.img标签和CSS背景使用图片在使用场景上有何区别?
-
img标签的图片一般是可变的，例如网站上的广告，用户头像，产品介绍、网页介绍，这些能传达更多内容的东西。
Paste_Image.png
-
css背景图片一般比较少变化，除非网页改版或者一些样式需要改版才会改变。基本上传达的是一些功能上的补充说明，例如下图显示的一些小图标，告诉你它的功能。
Paste_Image.png
3.title和 alt属性分别有什么作用?
-
titles属性为当鼠标移动到此处时显示的文本，很显然从它的用法来看，它是作为一种提示信息。例如下图：
Paste_Image.png
- alt属性为当图片无法显示时，在图片本身的位置上显示alt的文本内容，它不像title的信息是作为一种补充，alt属性显示的文本应该表达图片内容，一种看图说话的感觉。比如下图：
Paste_Image.png
4.background: url(abc.png) 0 0 no-repeat;这句话是什么意思?
同时满足下面条件：
-
背景图引用相对目录路径为abc.png的图片。
-
backgroun-position：0 0为左上角（背景图片放置容器位置）。
- x% y% ( 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。)
-
mpx npx (第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。)
-
no-repeat:不重复。（可使用的值有repeat、no-repeat、repeat-x、repeat-y、inherit。分别表示水平垂直重复、不重复、仅水平重复、仅垂直重复、继承自父辈元素。）
-
background: url(abc.png) 0 0 no-repeat;如下图：
Paste_Image.png
5.background-size有什么作用? 兼容性如何? 常用的值是?
- background-size:设置背景图片显示的尺寸。
- 兼容性：caniuse
Paste_Image.png
-
常用值：
Paste_Image.png
-
改变原始图片大小时（设置为固定尺寸）：
Paste_Image.png
-
- 值为cover：
Paste_Image.png
- 值为contain:
Paste_Image.png
注:上面的概念有时候真有点不知道怎么解释清楚。
6.如何让一个div水平居中？如何让图片水平居中?
如图：
需要看代码请点击此处！
Paste_Image.png
7.如何设置元素透明? 兼容性？
- opacity：0～1；0：完全透明，1:完全不透明。opacity:n. 不透明；不传导；暧昧。
Paste_Image.png
- 兼容性：
Paste_Image.png
8.opacity和 rgba都能设置透明，有什么区别?
- rgba只是做作用于color属性的值，区别如下图：看代码点击此处
Paste_Image.png
本文版权归作者和饥人谷所有，转载请注明来源
网友评论