标签：
给网页添加图片
1、 常用来处理图片的CSS属性：
（1） border（边框）：给图片添加边框。
（2） padding（填充）：边框和图片之间填充空间。
（3） float（浮动）：浮动图片是指将图片移到左侧或者右侧。
（4） margin（边距）：图片和其他网页元素之间添加空间。
2、 添加图片背景：
background-image属性可以给元素添加背景。例如：给网页添加一个背景可以给<body>创建如下样式：
body{
background-image：url（images/bg.gif）；
}
这个属性用了一个值：关键字url 括号里的内容是图形的文件属性。
3、 控制重复：
background-repeat属性指定图片要如何平铺。
（1） repeat是默认设置，将图片从左到右从上到下平铺直到整个空间都被图片填满为止。
（2） no-repeat只显示图片一次，不会平铺或重复。
（3） repeat-x沿着x轴水平地重复某一张图片。
（4） repeat-y沿着y轴垂直地重复某一张图片。
4.、定位图片背景：
background-position属性可以通过3种不同的方法来设定图片在水平方向和垂直方向的起点，它们分别是keyword、精确值和percentage。
（1） 关键字：关键字的选项有两组，一组用来控制水平方向的3种定位：left、center、right。另一组用来控制垂直方向的3种定位：top、center、bottom。
（2） 精确值：可以用px或em指来定位背景图片。这里要使用两个值，一个值指明图片左侧和容器左侧之间的距离，另一个值指明图片顶边和样式顶边之间的距离。换句话说，第一个值控制水平方向的定位，第二个值控制垂直方向上的定位。
（3） Percentage：也可以用百分比值定位图片背景。
5、如何固定图片：background-attachment属性可以固定图片一直保持在视图区。它有两个选项：scroll和fixed。Scroll：背景会随着文本和其他网页内容一起滚动，fixed则是把图片保持在背景中的某个固定位置上。
6、定位背景图片的background-origin和background-clip属性：
可以用background-origin属性调整图片的起点，它的值有3个选项：
（1） border-box：将图片放在border区域的左上角。
（2） padding-box：将图片放在padding区域的左上角。
（3） content-box：将图片放在内容区域的右上角。
注意：这两个属性在IE8及其更早的版本中均不起作用，因此需要谨慎使用。
background-clip属性可以限制背景图片的显示区域。一般来说，背景图片会铺满某个元素的整个区域，包括border和padding区域的背面。但是，也可以利用一下任意一个值来定义图片的显示位置：
（1） border-box让图片显示在内容区域的背后。
（2） padding-box是所有背景图片都只能显示到元素的padding区域和内容区域。
（3） content-box限制背景图片只显示在内容区域。
7、缩放背景图片：
CSS3增加了一个background-size属性，它可以控制图片背景的尺寸。可以使用精确值，也可以使用关键字。关键字contain会迫使图片按照原有的长宽比进行调整，关键字cover会迫使图片的宽度或者高度进行调整，以便适应元素的宽度或者高度。
8、使用渐变色背景：
渐变有以下几种类型：
（1）线性渐变：是最基本的渐变类型，它将一条直线从元素的一边移到另一边，并且从一种颜色逐渐转变成另一种颜色。例如，创建一种从元素左边以黑色开始渐变到元素的最右边，并以白色结束，可以像下面这样写代码：
background-iamge：line-gradient（left，black，white）；
第一个值表示元素的起始位置，第二个值是起始颜色，第三个值是结束颜色。起始位置可以用关键字left、right、top、bottom也可以用程度值：0-360之间的数字加上deg组成。如0deg表示从左边开始移到右边，45deg表示呈45°角向上移到右上角。
渐变颜色可以多种，例如从黑到白再到黑可以这么写：
background-image：linear-gardient（left，black，white，black）
可以指定颜色的位置：
Background-image：linear-gradient（left，#900，#FC0 10%，#FC0 90%，#900）；10%表示将#FC0这个颜色到达元素宽度10%位置处。
为了让渐变再不同浏览器上都能生效，必须添加供应商前缀。
（2）径向渐变：以圆形或椭圆形向外辐射。只需要提供一种起始色和终止色。例如：
background-image：radial-gradient(red, blue)；
它创建了一个适合元素高度和宽度的椭圆形，渐变的中心（起始的红色）处于元素的中心。
如果在颜色值之前添加关键字circle，可以创建出圆形渐变。例如：
background-image（circle ，red，blue）；
径向渐变的定位值要放在颜色值和形状关键字之前。
为了指明渐变的尺寸可以使用以下4个关键字：
（1） closest-side告诉浏览器渐变要从中心点一直延伸到离中心点最近的那一边。
（2） closest-corner用于测量渐变的宽度，指的是从它中心点到最近元素角的距离。
（3） farthest-side用于测量圆形的半径，即从它的中间点到元素最远的那一边的距离。
（4） farthest-corner用于测量圆形的半径，即从它的中间点到元素最远角的距离。
9、重复径向渐变：background-image：repeating-radial-gradient（circle，red 20px，orange 30px，yellow 40px，red 50px）。
标签：
原文地址：http://www.cnblogs.com/koto/p/5064973.html
