CSS background属性的使用方法

CSS的background 是一个指定元素背景的属性。

网页的背景主要是通过“着色”和“插入图像”来制作的。

background属性的种类

background-color：… 颜色

background-image：… 背景图片

background-size：… 背景图片尺寸

background-repeat：… 如何重复背景图片

background-position：… 指定背景图片的位置

background-attachment：… 设置背景图像是否固定

background-color … 颜色

CSS中，颜色值通常以以下方式定义:

• 十六进制 – 如：background-color:#00ff00;

• RGB – 如：background-color:rgb(255,0,255);

• 颜色名称 – background-color: skyblue;

其中十六进制的颜色编码可以缩写。

比如黑白，「#000000」「#ffffff」

#000000 → #000
#ffffff → #fff

这种也可以。
#009944　→　#094

background-image：… 背景图片

background-image 属性用来设置一个元素的背景图像。

background-image:url("...");

也可以加入多张图片，在中间加个逗号即可。

background-image: url("01.png"),
    url("02.jpg");

默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，可以使用背景色带代替。

background-size：… 背景图片尺寸

background-size: 100px; 200px;

具体数值以外的值也可以。

cover：保持图像的纵横比，并将图像缩放成将完全覆盖背景定位区域的最小大小。

contain：保持图像的纵横比，并将图像缩放成将适合背景定位区域的最大大小。

background-repeat：… 如何重复背景图片

默认状态下，背景图像将向垂直和水平方向重复。

如果不想让它重复的话……

background-repeat: no-repeat;

只有水平位置会重复背景图像……

background-repeat: repeat-x;

只有垂直位置会重复背景图像……

background-repeat: repeat-y;

background-position

background-position属性设置背景图像的起始位置。

默认值是左上角，top left。

  background-position: center;   /* 正中央 */

  background-position: right;   /* 右侧居中 */

  background-position: left;   /* 左侧居中 */

  background-position: top center;   /* 顶部居中 */


  background-position: top right;   /* 右上角 */

  background-position: bottom center;   /* 底部居中 */

  background-position: left bottom;   /* 左下角 */

  background-position: right bottom;   /* 右下角 */

如果只指定一个词，另一个将会是”center”。

还可以通过”px”或”%”设置精确位置。

• x% y% : 第一个值是水平位置，第二个值是垂直。

左上角是0％0％。右下角是100％100％。

如果仅指定了一个值，其他值将是50％。

默认值为：0％0％

• background-position: top 50px right 120px;

background-attachment：… 设置背景图像是否固定

默认值是scroll。背景图片随着页面的滚动而滚动。

fixed：背景图片不会随着页面的滚动而滚动。

local：背景图片会随着元素内容的滚动而滚动。