网页背景图像设置总结

网页设计小白一坨，想归纳一下网页背景图的设置的各种方法，现在肯定方法很基础贫瘠，以后通过不断学习会不断更新的……莫欺少年挫……

直接在HTML的<body>标签里使用backgroud属性设置整个网页背景

<body background="图片路径">
</body>

文件路径如果和网页在一个文件夹内则只用写图片名字并且如果图片小于网页显示窗口，会自动重复添加。

既然说到这，就顺便归纳下<body>的几个属性吧：

<body ［bgcolor|text|link|alink|vlink|background］>
OBJECTS
</body>

bgcolor：HTML的背景色。
text：指定HTML文件中文字色彩属性。
link：指定HTML文件中待链接超链接对象色彩属性。
alink：指定HTML文件中链接中超链接对象色彩属性。
vlink：指定HTML文件中已链接超链接对象色彩属性。
background：指定HTML背景图形。

TIPS：不过现在html5越来越注重元素的语义化，一般html主要用来设置网页框架，用CSS设置样式即可。

在CSS中使用background-image属性定义背景图像

background-image: none|<url>

默认值为none，无背景图；<url>表示使用绝对地址或相对地址指定背景图像。所导入的图像可以是任意类型。但是符合网页显示的格式一般是GIF,JPG,PNG，如果·背景包含透明区域的GIF或PNG格式图像，则这些图像被设置为背景时，保留透明区域。

CSS3支持background-image设置渐变背景：

background-image: <linear-gradient>|<radial-gradient>|<repeating-radial-gradient>;

取值说明：

<linear-gradient>：使用线性渐变创建背景图像

<radial-gradient>：使用径向（放射性）渐变创建背景图像

<repeating-linear-gradient>：使用重复的线性渐变创建背景图像

<repeating-radial-gradient>：使用重复的径向渐变创建背景图像

以上实际上是渐变函数，比较复杂，以后会单独写一篇blog，在此就点一下吧……

在CSS中使用background-repeat属性控制背景图像的显示方式

background-repeat:repeat-x|repeat-y|[repeat|space|round|no-repeat]{1,2};

repeat-x 背景图片横向重复

repeat-y 背景图片纵向重复

repeat 背景图片横向和纵向重复

no-repeat 背景图片不重复

round 背景图片自动缩放直到适应且填满整个容器，仅CSS3支持

space 背景以相同的间距平铺且填满整个容器或某个方向，仅CSS3支持

在CSS中使用background-attachment定义固定背景

一般情况下，背景图像能够跟随网页内容整体上下滚动。有些特殊背景图像如水印或者窗口背景希望不管滚不滚动窗口图像一直显示，该属性能够定义背景图像始终显示在窗口的某个位置。

background-attachment: fixed|local|scroll

默认值为scroll。

fixed：背景图像相对于浏览器窗体固定。

scroll：背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。

local：背景图像相对于元素内容固定也就是说当元素内容滚动时背景图像也会跟着滚动，此时不管元素本身是否滚动，当元素显示滚动条时才会看到效果。该属性仅CSS3支持。

在CSS中使用background-position属性定义背景图像的显示位置

默认情况下，背景图像都是从元素 padding 区域的左上角开始出现的，即图像的左上角和包含框左上角顶点是重合的。

background-position: xpos ypos | x% y% | x y ;

background-position属性需要 2 个参数值，第一个值用于横坐标，第二个值用于纵坐标，默认值为 0% 0%，即背景图像的左上角与对象背景区域的左上角对齐（left top）。如果只提供一个值，则用于 x 轴方向，y 轴方向使用默认值 center，即垂直居中。

xpos ypos：表示使用预定义关键字定位，水平方向可选关键字有 left | center | right，垂直方向可选关键字有 top | center | bottom。xpos 为 left 表示图像的左边与对象的左边对齐，为 right 表示图像的右边和对象的右边对齐；ypos 为 top 表示图像的顶部和对象的顶部对齐，为 bottom 表示图像的底部和对象的底部对齐；xpos、ypos等于 center表示图像在水平和垂直方向的中心，和对象在水平和垂直方向的中心对齐。

x% y%：表示使用百分比定位，是将图像本身（x%, y%）的那个点，与背景区域的（x%, y%）的那个点重合。

x y：表示使用长度值定位，是将背景图像的左上角，放置在对象的背景区域中（x, y）所指定的位置，即 x, y 定义的是背景图像的左上角，相对于背景区域左上角的偏移量。

在CSS3中，background-position属性支持 4 个参数值，前两个值用于横坐标，后两个值用于纵坐标。这意味着我们可以相对于上左下右任意一个角落定位，而不是之前只能相对于左上角定位。可以用长度值、或百分比来指定背景图像的起始位置。

如果只提供一个值，则第二个值为center。如果提供两个值，第一个长度或百分比表示水平偏移，第二个长度或百分比表示垂直偏移。长度或百分比，表示背景图像的左上角相对于背景位置区域左上角的偏移。如：

background-position: left 10px top 15px; /* 10px, 15px */
background-position: left top ; /* 0px, 0px */
background-position: 10px 15px; /* 10px, 15px */
background-position: left 15px; /* 0px, 15px */
background-position: 10px top ; /* 10px, 0px */
background-position: left top 15px; /* 0px, 15px */
background-position: left 10px top ; /* 10px, 0px */

在CSS中直接定义复合元素background的属性

把background-image，background-repeat，background-position等背景属性合并在一起在background属性中统一声明，这样能节省代码。因此background属性也称为复合属性。

示例：

body {background: #069FF url(images/bg.jpg) repeat-x left bottom;margin-right: 2cm;margin-left: 2cm;
}

在这个示例中，直接使用了一个大图来定义网页背景。设置背景图像沿x轴方向平铺，同时使用关键字定位图像从浏览器窗口的左下角开始平铺。为了避免因为背景图像的丢失而影响页面的显示效果，同时在background属性中定义一个接近蓝色的颜色（#069FFF），然后设置外边距两边各2cm。

-----------------------------------------有了新学习接更-----------------------------------------