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

---

本文版权归作者和饥人谷所有，转载请注明来源