CSS常用属性之背景属性（七）

该篇文章主要介绍了 background 背景属性（颜色、图片、重复、位置、复合属性）、CSS 精灵图，背景固定，背景尺寸、线性渐变，径向渐变，浏览器私有前缀等一系列与背景属性相关联的知识点

1、background-color 背景颜色

background-color 表示背景颜色
 
背景颜色可以用 十六进制、rgb()、rgba() 或 英文单词表示
 
padding 区域是有背景颜色的
 
简单示例：
 

2、background-image 图片

background-image属性用来设置背景图片。
 
图片路径要写在 url()圆括号中，可以是相对路径，也可以是绝对路径，可以同时写多个路径
 
地址相对路径是从 css 样式的位置出发

3、background-repeat 重复

用来设置背景图片的重复模式，在默认情况下，背景是会在 x 和 y 轴方向进行平铺。
 
background-repeat 属性值：
 

值	描述
repeat;	x，y 均平铺 （默认）
repeat-x;	x 平铺
repeat-y;	y 平铺
no-repeat;	不平铺

4、background-position 背景图片位置

用来控制背景图片在盒子中显示的开始位置，背景图片位置默认是从 padding 区开始计算。
 

语法：
 

/* x与盒子左边距离  Y与盒子上边距离 */
background-position: x y;

4.1、数值表达法

固定值写法：
 

/* 背景图与盒子左边20px  上边30px距离 */
background-position: 20px 30px;

---

百分比写法：

• 左偏移量=（容器width+左右padding-背景图width）*百分比
• 上偏移量=（容器height+上下padding-背景图height）*百分比
   

/* 
   如果盒子宽为100px，高为200px，内边距为0，背景图宽高分别为50px
   则左边距离为（100-50）*10%=5px
   则上边距离为（200-50）*20%=30px
*/
background-position: 10% 20%;

/* 负值情况
   如果盒子宽为100px，高为200px，内边距为0，背景图宽高分别为50px
   则左边距离为（100-50）*-10%=-5px
   则上边距离为（200-50）*-20%=-30px
*/
background-position: -10% -20%;

---

单个值写法：
 

/* 
  当只有一个值时
  表时背景图与盒子左边间距为宽的10%，垂直方向居中显示
*/
background-position: 10%;

4.2、关键词表达法

可以用 （top、bottom）、（center）、（left、right） 三组中的任意两个组中的一个值组合或任意一个值来确定位置。
 

/* 左上角 */
background-position: top left;
/* 左边中间 */
background-position: left center;
/* 上中间 */
background-position: top;
....

---

单一关键字与对应组合关键字表示法：
 

单一关键字	等价的组合关键字
center	center center
top	top center 或 center top
bottom	bottom center 或 center bottom
right	right center 或 center right
left	left center 或 center left

5、background 复合属性

常用的背景相关小属性，可以合写到一条 background 属性中（常用）。
 
background 是 background-color、background-image、background-repeat、background-position 的简写
 
语法：
 

p {
    background: #fff url(./images/yingtao.png) no-repeat center center;
}

6、CSS 精灵图

将多个 小图标 合并制作到一张图片上，然后使用 background-position属性单独显示其中一个，这样的技术叫做 CSS 精灵技术 ，也叫作CSS 雪碧图
 
CSS 精灵技术可以减少 HTTP 请求数，加快网页显示速度，但缺点也很明显：不方便测量，后期改动麻烦

7、background-attachment 背景固定

决定背景图像的位置是在 视口 内固定，或者随着包含它的区块滚动。

---

属性值	描 述
scroll	默认值。背景图片随着页面的滚动而滚动，相对于元素本身固定，而不是随着它的内容滚动
fixed	表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动
local	背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，同时背景图图片随着页面的滚动而滚动

8、background-size 背景尺寸

属性值	说明	实例
x y	x y 数值，分别表示背景图片宽高大小	background-size: 100px 200px;
x% y%	百分比是相对于盒子的宽高而言，	background-size: 50% 20%;
x auto	auto 是相对于第一个值宽来自动缩放 第一个值可以是数值，也可以是百分形式	background-size: 100px auto;
contain	背景图片智能改变尺寸以容纳到盒子里	background-size: contain;
cover	背景图片智能改变尺寸以撑满盒子	background-size: cover;

---

① 数值表示法
 

.box1 {
/* 宽100px 高200px */
background-size: 100px 200px;
/* 宽为盒子宽的10% 高为盒子高的20% */
background-size: 10% 20%;
/* 宽100px 高相对应宽自动缩放 */
background-size: 100px auto;
}

---

② contain 和 cover 表示法
 

.box1{
  /* 盒子里能看到图片全部内容 */
  background-size: contain;
}
.box2{
  /* 自动撑满盒子 */
  background-size: cover;
}

9、线性渐变

盒子的 background-image 属性可以用linear-gradient()形式创建线性渐变背景。
 
语法：
 

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

属性值：
 

值	描述
direction	用角度值指定渐变的方向（或角度）。 未设置角度，则默认为 180deg（从上到下） 设置了角度，则 0deg 为竖直向上，然后顺时针旋转 指定关键词 to right、to top、to bottom 、to bottom right 等
color-stop1, color-stop2,...	用于指定渐变的起止颜色。

---

① 未设置角度，则默认从上向下渐变
 

.box1 {
width: 200px;
height: 200px;
/* 
linear-gradient 线性渐变
默认为从上往下渐变
gole 表示开始颜色
red 表示结束颜色
*/
background-image: linear-gradient(gold, red);
}

---

② 关键字来指定渐变的方向
 

.box1 {
width: 200px;
height: 200px;
/* 
linear-gradient 线性渐变
to right 表示渐变方向，向右
gole 表示开始颜色
red 表示结束颜色
*/
background-image: linear-gradient(to right, gold, red);
}

---

③ 用度数来指定渐变方向
 

.box2 {
width: 200px;
height: 200px;
/* 45deg 表示倾斜方向，deg表示度数 */
background-image: linear-gradient(45deg, green, red);
}

---

④ 多个颜色值，并且可以用百分数定义它出现的位置
 

.box3 {
width: 200px;
height: 200px;
/* 
yellow 代表中间色
20% 表示yellow出现的位置
*/
background-image: linear-gradient(to bottom, blue, yellow 20%, red);
}

---

⑤ 浏览器私有前缀
 
不同浏览器有不同的私有前缀，用来对实验性质的 CSS 属性加以标识。

 

浏览器	前缀
Chrome 浏览器	-webkit-
Firefox 火狐	-moz-
IE、Edge	-ms-
欧朋	-o-

background-image: -webkit-linear-gradient(to right, gold, red);
background-image: -moz-linear-gradient(to right, gold, red);
background-image: -ms-linear-gradient(to right, gold, red);
background-image: -o-linear-gradient(to right, gold, red);
background-image: linear-gradient(to right, gold, red);

10、径向渐变

盒子的 background-image 属性可以用 radial-gradient() 形式创建径向渐变背景
 
语法:
 

background-image: radial-gradient(
shape size at position,
start-color,
...,
last-color
);

属性值：
 

值	描述
shape	确定圆的类型 ellipse (默认)：指定椭圆形的径向渐变 circle ：指定圆形的径向渐变
size	定义渐变的大小 farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角 closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边 closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角 farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边
position	定义渐变的位置 center（默认）：设置中间为径向渐变圆心的纵坐标值。 top：设置顶部为径向渐变圆心的纵坐标值。 bottom：设置底部为径向渐变圆心的纵坐标值。
start-color, …, last-color	用于指定渐变的起止颜色

示例：
 

.box {
width: 200px;
height: 200px;
/* 
radial-gradient 径向渐变
50% 50% 表示圆心坐标
*/
background-image: radial-gradient(50% 50%, red, gold);
}