CSS的背景

CSS中的背景（background）

---

在我们浏览很多网页中会发现，很多的网页除了各种信息为，都有着形形色色的背景，以此来让网页显得更加漂亮美观。
CSS的背景属性有以下几个：

• 背景颜色(background-color)

• 背景图片(background-image：url(背景图片地址))

• 背景平铺(background-repeat）

• 背景位置 (background-position)

• 背景固定(background-attachment)

• 背景透明(background:rbga(0,0,0,.3))

---

背景颜色

背景颜色顾名思义是用来设定背景的颜色的，当我们没有为背景设定颜色时，浏览器会使用默认的背景颜色（透明）。背景颜色和字体颜色一样，可以通过预定色，十六进制，RBG码来进行设定。

---

背景图片

插入一张背景图片，背景图片的优先级要大于背景颜色，背景图片会覆盖掉背景颜色，虽然是这样，但是在设置背景图片时，最好也设置好背景颜色，以防止背景图片出现问题无法显示时，依旧有背景颜色在，不至于失去背景图片后显得太过于朴素。

---

背景平铺

当我们插入一张背景图片时，当图片的大小没标签范围大时，就会出现平铺。在我们未设定是否平铺时，默认是平铺的。背景平铺一共有四个值：

• repeat(平铺)
• no-repeat(不平铺)
• repeat-x(沿水平方向平铺)
• repeat-y(沿垂直方向平铺)

---

背景位置

背景图片插入后，默认的位置是左上角对齐，但是有些情况下我们并不希望它对齐左上角。这就需要给他一个位置了，位置属性：
x : left(左)，center(中)，right(右)
y : top(上)，center(中)，bottom(下)

如：background-position:center top;

除直接编写位置外，也可以通过编写像素来确定图片的位置

如：background-position:10px top;

---

背景固定

用来设定背景是否随着内容一起滚动

• scroll(滚动)
• fixed(固定)

---

背景透明

背景透明是通过编写RBG码来实现的，原本编写颜色的RBG码只有三个数值即：rbg(0,0,0),而现在多了个透明度:rbga(0,0,0,0.3)最后一个 数值代表的是透明度，数值在0-1中取值，数值越大透明度越低，在实际编写中可以把0省略，直接写 .3 即可。

---

拓展

背景简写

背景相关的属性这么多，这与font属性很像，font属性有综合写法，那背景属性有吗？答案是有的。将属性综合一起来写我们称为背景简写。虽然背景简写并并没有强制要求顺序，但是为了方便阅读，我们通常按照：背景颜色-背景图片-背景平铺-背景滚动-背景位置 这个顺序来编写。
如： background:red url(图片地址) no-repeat scroll center top;
属性间使用空格分隔。