本节介绍css的背景属性以及利用成果
- css罕用的背景属性
- 背景利用
css3新增背景属性
css罕用背景属性
css中的背景是由background属性来设置背景的，它是一个综合属性，能够拆分为繁多的属性
背景色彩background-color
属性名：background-color
作用：在盒模型border以内区域扭转或者增加背景色彩
代码示范：
div{ background-color: red;}背景图片background-image
属性名：background-image
属性值：url（门路）
作用：给盒子增加图片背景，图片不够覆盖住盒子会反复铺满盒子背景
代码示范：
div{ background-image: url();/*图片门路*/}背景反复background-repeat
属性名：background-repeat
作用：设置增加背景图是否反复进行加载
属性值：repeat（默认值）、no-repeat、repeat--x、repeat--y
| 属性值 | 作用 |
|---|---|
| repeat | 默认值，反复加载图片填满盒子背景区域 |
| no-repeat | 不反复加载图片 |
| repeat--x | 反复加载程度方向 |
| repeat--y | 反复加载垂直方向 |
代码示范：
div{ background-repeat:no-repeat}背景定位background-position
属性名：background-position
作用：设置不反复图片的加载地位
属性值：left、right、center、top、center、bottom、px、%，必须要有两个值，一个x轴，一个y轴
代码片段
背景附着background-attachment
属性名：background-position
作用：设置背景图片是否随着页面滚动
属性值：scroll、fixed（固定）
综合写法background
属性值：能够有1-5个属性值，值之间用空格隔开，背景定位的两个属性值不能被离开写，算作其中的一个属性值，五个属性值地位能够随便书写
代码片段
背景利用
以图换字
个别h1标签是权重最高的，外部会搁置最重要内容，比方logo图片、最大的题目等
h1外部文字也能够进步seo搜寻排名又想应用文字且应用图片就须要用到以图换字
div{ text-indent:-30em; white-space:nowrap; overflow:hidden;}精灵图利用
精灵图利用：当用户拜访网站时，网页上每一张图都要通过一次申请能力展示给用户，然而网页中有许多小背景图作润饰，会影响网页的加载速度，这时候就要将小背景图集合成一张图片进行加载
实际操作：
1、要设置好背景图的宽度
2、精灵图放的都是装璜的小背景图
3、精灵图能够x轴、y轴摆放
代码片段
css3新增背景属性
背景半透明
rgba模式：在rgb根底减少一个透明度，取值范畴0-1，值越小，透明度越高
书写形式：rgba(红色，绿色，蓝色，不透明度)
留神：透明度只对背景有用，内容不影响
代码示范：
*{ margin: 0; padding: 0; } div{ border: 1px solid red; width: 400px; height: 400px; margin: 100px auto; background-color:rgba(232, 211, 255,0.2); }背景缩放background-size
作用：缩放背景图的比例大小
属性值：px值、%、cover（主动调整缩放比例，溢出会被暗藏）、contain（主动调整缩放比例，把图片扩大到展现区域最大化）