CSS速成教程—介绍网页背景——3

1.CSS 背景：

css 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果

表格中的属性我们将会通过下面两个例子给大家一一讲述。

例子 1：背景颜色

body{
   background-color: red;
}

例子 2：设置背景图

body{
   background-image: url("python.png")
}

大家可以看到显示出来的背景图有很多个 python 图片，这是因为默认情况下背景图显示重复，我们可以background-repeat属性来设置图片是否可重复。 css.css 添加以下内容

body{
   background-image: url("python.png");
   background-repeat: no-repeat;
}

no-repeat 表示不能重复，repeat 可重复，repeat-x 表示 x 轴重复，repeat-y 表示 y 轴重复

ackground-position用来设置图片的起始位置 下面的例子在 body 元素中将一个背景图从中间顶部放置：

body{
   background-image: url("python.png");
   background-repeat: no-repeat;
   background-position:center top;
}

　　为 background-position 属性提供值有很多方法。首先，可以使用一些关键字：top、bottom、left、right 和 center。通常，这些关键字会成对出现，不过也不总是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。我们这里不详细阐述属性值，需要用到的时候大家可以在 w3school 上面查找。

背景关联 如果网页比较长，那么当网页向下滚动时，背景图像也会随之滚动。当网页滚动到超过图像的位置时，图像就会消失。 我们可以通过background-attachment属性防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响：

body{
   background-image: url("python.png");
   background-repeat: no-repeat;
   background-attachment:fixed;
}

防止背景图滚动相信大家大家也是经常见到，尤其是一些烦人的广告。

2.css3 背景

我们还是引用上面的例子来讲述这些属性。

body{
   background-image: url("python.png");
   background-repeat: no-repeat;
   background-size：100px 100px;
}