第11天笔记

 CSS 精灵

**概述：**

CSS精灵英文叫法 `CSS sprites`，通常被解释为“CSS 图像拼合” 或 “CSS 贴图定位”，其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置。

#### 2.1 精灵图的原理

##### 2.1.1 实现步骤

1. 通常要限定容器大小

2. 图片拼合

3. 背景定位

##### 2.1.2 优缺点

**优点**

- 减少网页的 http 请求，从而大大的提高页面的性能

- 图片命名上的困扰

- 更换风格方便

**缺点**

- 必须要限定容器大小符合背景图元素位置

- 需要计算位置。

##### 2.1.3 应用场景

适用于一般小图片（如小图标，小背景），不适合大背景大布局背景。

#### 3.1、单行文本溢出显示省略号

```css

 /* 关键代码 */

            overflow: hidden;/* 溢出影藏 */

            white-space: nowrap;/* 强制不换行 */

            text-overflow: ellipsis;/* 溢出显示省略号 */

```

#### 3.2、多行文本溢出显示省略号

##### 3.2.1、方法一：after实现

```css

.box {

    width: 200px;

    line-height:30px;

    height:90px;

    background-color: red;

    position:relative;

    text-align:justify;

    overflow: hidden;

}

.box:after{

    content:"...";

    position:absolute;

    right:0;

    bottom:0;

    background-color: red;

    width:1em;

}

```

该方法适用范围广，但文字未超出行的情况下也会出现省略号，可结合js优化该方法。

说明：

1. 将height设置为line-height的整数倍，防止超出的文字露出

2. 给p::after添加渐变背景可避免文字只显示一半

3. 由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将::after替换成:after

##### 3.2.2、方法二：弹性盒

```css

.box {

    width: 200px;

    line-height:30px;

   

    background-color: red;

    /* 旧版弹性盒 */

    display:-webkit-box;

            /* 弹性盒子元素垂直排列 */

    -webkit-box-orient: vertical;

             /* 控制要显示的行数 */

    -webkit-line-clamp: 4;

   

    overflow: hidden;

}

```

注意：因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端！

代码说明：

>-webkit-line-clamp;用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。

>display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。

>-webkit-box-orient必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式 。

 

## PS基础

### 1、PS简介

[Adobe Photoshop，简称“PS”]，是由Adobe 开发和发行的[图像处理软件]。

Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。

ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。

### 2、常用快捷方式

#### 2.1 文件

- 新建 ctrl+n

- 打开 ctrl + o

- 关闭 ctrl+w

- 保存 ctrl+s

- 另存  ctrl+shift+s

- 存储为web所用格式 ctrl+alt+shift+s

  

#### 2.2 编缉

- 变换 ctrl+T

- 首选项——单位与标尺

#### 2.3 图像

- 图像大小 crlt+alt+i

- 画布大小 crtl+ alt+c

- 裁剪

- 裁切

  

#### 2.4 选择

- 反选 ctrl+shift+I

- 取消选择 ctrl+D

  

#### 2.5 视图

- ctrl+R  标尺

- 清除参考线

- 清除切片

  

#### 2.6 窗口

- 图层F7

- 信息面板 F8

- 扩展或功能

  

### 3、常用工具

#### 3.1 移动工具

- 自动选择——图层【分组】

- 对齐

  - 选中图层——选择对齐方式

    

#### 3.2 选区

- 新选区

- 是否羽化（提示0像素，某些同学会出现松开鼠标测量结果 不准确注意此处设置）

- 固定大小，固定比例

  

#### 3.3 放大镜

- 放大、缩小画布（默认放大，配合alt缩小）

- ctrl+加号 ctrl+减号  缩放

- alt+鼠标滚轮滚动（ 向前放大，向后缩小）

  

#### 3.4 抓手工具

- 移动画布

  任何工具下配合空格键（转换为抓手工具）

  

#### 3.5 文字工具

- 查看文字大小、字体、颜色

- 复制、粘贴文字

  

#### 3.6 切片工具

右键

**编缉切片选**

- 修改位置 x，y，修改大小 w，h

  

**划分切片**

- 右键划分切片（水平、垂直）

  

**存储**

- ctrl+alt+shift+s存储为web所用格式

- 所有用户切片

  

- 图片命名

  

- images文件夹

  

 

### 4、Cutterman插件

#### 4.1 介绍

Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工 "导出web所用格式" 以及使用切片工具进行挨个切图的繁琐流程。

它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。

#### 4.2 下载

官网：http://www.cutterman.cn/zh/cutterman

#### 4.3 安装

1. 下载对应工具的一键安装程序

2. 解压下载的安装包, 里面是一个可执行文件, 双击打开

3. 点击安装即可

#### 4.4 启用

- 安装完成后重启PS, 从菜单栏 -> 窗口 -> 扩展里头打开

- 注：需要登录

  安装完成后重启PS, 从菜单栏 -> 窗口 -> 【扩展功能】-> 【cutterman】打开。


#### 4.5 设置输出路径


####  4.6 一键切图

点击导出选中图层，可以自动输出所需的各种图片。


**支持各种图片格式输出**


 

**多个图层合并、单独输出**


**固定尺寸输出**

 


### 5、图片格式

在保证视觉效果的情况下，选择最小的图片格式与图片质量（通常选择 70-80 之间），以减少加载时间。

#### 5.1 PSD

Photoshop默认保存的文件格式，可以保留所有有图层、色版、通道、蒙版、路径、未栅格化文字以及图层样式等。

#### 5.2 JPG

- 色彩丰富 【不支持透明】            

- 压缩比高，生成文件体积小，

- 支持多种压缩级别可以控制文件大小

- 色彩丰富的图片（摄影图像（产品图，照片，渐变，banner图））

#### 5.3 GIF

- 支持动画

- 支持透明（全透明）

- 颜色不够丰富，只支持256种颜色、文件小

- 适用于：色彩简单的logo/icon/动图

#### 5.4 PNG

-  颜色丰富

-  支持alpha透明（全透明和全不透明，半透明）  

-  早期的浏览器不支持PNG图像

-  适用于：透明背景图片【投影，发外光, 线条复杂（文字）】

#### 5.5 WebP

谷歌（google）10年推出一种新型图片格式

- 文件小，支持有损和无损压缩，支持动画、透明

- 但并不是所有浏览器都支持 webp

- 兼容