CSS定位元素--背景

CSS 里也同样，每一个元素盒子均可以想象成由两个图层组成。元素的前景层包含内容（如文本或图片）和边框，元素的背景层能够用实色填充（使用background-color 属性），也能够包含任意多个背景图片（使用background-image 属性），背景图片叠加在背景颜色之上。

CSS背景属性

  background-color

  background-image

background-repeat

background-position

background-size

background-attachment

background（简写属性）

background-clip、 background-origin、 background-break（目前还没有获得普遍支持）

背景颜色

background-color 是背景属性中最简单的，经过它能够设定元素的颜色。而后，元素就会以设定的颜色填充背景图层

背景图片

background-image:url(图片路径/图片文件名)

背景重复

控制背景重复方式的 background-repeat 属性有 4 个值。默认值就是 repeat。repeat-x、repeat-y、 no-repeat

背景粘附

background-attachment 属性控制滚动元素内的背景图片是否随元素滚动而移动。这个属性的默认值是 scroll，即背景图片随元素移动。若是把它的值改成 fixed，那么背景图片不会随元素滚动而移动。

background-attachment:fixed 最经常使用于给 body 元素中心位置添加淡色水印，让水印不随页面滚动而移动。

简写背景属性

body {background:url(images/watermark.png) center #fff no-repeat contain fixed;}

声明中少写了哪一个属性的值（好比没写 no-repeat），就会使用相应属性的默认值（repeat）。

多背景图片

p {
    height:150px;
    width:348px;
    border:2px solid #aaa;
    margin:20px auto;
    font:24px/150px helvetica, arial, sansserif;
    text-align:center;
    background:
        url(images/turq_spiral.png) 30px -10px no-repeat,
        url(images/pink_spiral.png) 145px 0px no-repeat,
        url(images/gray_spiral.png) 140px -30px no-repeat, #ffbd75;
}

在 CSS 中，我把每张图片的声明都单独放在了一行里，以逗号分隔，以便看清它们的位置、重复的设定值。为了防止图片加载失败时元素背景处于默认的透明状态，这里也在最后一条声明中加上了背景颜色（加粗的值）。要注意的是，代码中先列出的图片显示在上方，或者说，更接近前景。

背景渐变

<div class='gradient1'></div>
<div class='gradient2'></div>
<div class='gradient3'></div>
CSS 规则以下。
/*为元素盒子添加样式*/
div {
height:150px;
width:200px;
border:1px solid #ccc;
float:left;
margin:16px;
}
/*例 1：默认为从上到下*/
.gradient1 {
background:linear-gradient(#e86a43, #fff);
}
/*例 2：从左到右*/
.gradient2 {
background:linear-gradient(to left, #64d1dd, #fff);
}
/*例 3：左上到右下*/
.gradient3 {
background:linear-gradient(-45deg, #e86a43, #fff);
}

/*例 1： 50%处有一个渐变点*/
.gradient1 {
background:linear-gradient(#64d1dd, #fff 50%, #64d1dd);
}
/*例 2： 20%和 80%处有两个渐变点*/
.gradient2 {
background:linear-gradient(#e86a43 20%, #fff 50%, #e86a43 80%);
}
/*例 3： 25%、 50%、 75%处有三个渐变点*/
.gradient3 {
background:linear-gradient(#64d1dd, #fff 25%, #64d1dd 50%, #fff 75%,
#64d1dd);
}
/*例 4：为同一个渐变点设定两种颜色能够获得突变效果*/
.gradient4 {
background:linear-gradient(#e86a43, #fff 25%, #64d1dd 25%, #64d1dd 75%,
#fff 75%, #e86a43);
}

参考：http://css.doyoe.com/  （章节：取值与单位---》图像---》linear-gradient()）