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

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

1、background-color 背景颜色

<style>
  .box {
    /* background-color: orange; */
    background-color: rgba(245, 100, 4, 0.5); /* 背景颜色及透明度 0.5 */
  }
</style>
<!--
背景颜色可以用 十六进制、rgb()、rgba() 或 英文单词表示
padding 区域是有背景颜色的
-->

2、background-image 图片

<style>
  .box {
    background-image: url(../images/luobo.png);
  }
</style>
<!--
该属性用来设置背景图片
图片路径要写在 `url()`圆括号中，可以是相对路径，也可以是绝对路径，可以同时写多个路径
地址相对路径是从 css 样式的位置出发
-->

3、background-repeat 重复

<style>
  .box1 {
    background-repeat: no-repeat; /* 不平铺 */
  }
  .box2 {
    background-repeat: repeat-y; /* y轴平铺 */
  }
  .box3 {
    background-repeat: repeat-x; /* x轴平铺 */
  }
  .box4 {
    background-repeat: repeat; /* x 和 y 轴平铺，默认值 */
  }
</style>
<!-- 该属性用来设置背景图片的重复模式，在默认情况下，背景是会在 x 和 y 轴方向进行平铺 -->

4、background-position 背景图片位置

/* 语法： */
background-position: x y; /* x与盒子左边距离  Y与盒子上边距离 */
/*
该属性用来控制背景图片在盒子中显示的开始位置
背景图片位置默认是从 padding 区开始计算
*/

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 复合属性

p {
    background: #fff url(./images/yingtao.png) no-repeat center center;
}
/*
常用的背景相关小属性，可以合写到一条 background 属性中（常用）
background 是 background-color、background-image、background-repeat、background-position 的简写
*/

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);
}

---

上一篇文章	下一篇文章
CSS常用属性之display属性（六）	CSS常用属性之其它属性（八）