本篇介绍关于背景（ background ）的新增属性和渐变函数（ gra die nt ），看看提供了 哪些 新背景元素控制和多种渐变效果的实现。
背景 Background
background 是多个 背景属性 的简写，
backgrounf: [background-color] | [background -i mage] |
[background-pos IT ion][/ background-size ] | [background-re PE at] |
[background-attachment] | [background-clip] | [background-ori gin ], .. .;注意： 如果有 background -s ize 值，需要紧跟 background-position 并且用 "/" 隔开；
background-image
background-image 属性可以添加多张背景图片，不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为 第一张 。设置多张 png 图片，可以出多张背景图叠加的效果。
background-image: url("media/ex am ples/lizard.png"),
url("media/examples/star.png");
建议： 使用背景图片的时候，最好也设置 背景颜色 （background-color），作为背景图片不支持时的 planB。
background-size
CSS3 以前，背景图像大小由图像的实际大小决定。在 CSS3 中， background-size 属性可以指定背景图像的大小，取值像素或百分比（相对于父元素的 宽 度和高度的百分比的大小）。
图片可以保有其原有的 尺寸 ， 或者 拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸：
cover ：保持图像的宽高比例，缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。 cont ai n ：保持图像的宽高比例，缩放背景图片以完全装入背景区，可能背景区部分空白。 一个值：这个值指定图片的宽度，图片的高度隐式的为 auto 两个值：第一个值指定图片的宽度，第二个值指定图片的高度background-origin
background-origin 规定了指定背景图片 background-image 属性的原点位置的背景相对区域。
注意： 当使用 background-attachment 为 fixed 时，该属性将被忽略不起作用。
border-box 背景图片的摆放以 border 区域为参考 padding-box 背景图片的摆放以 padding 区域为参考 content-box 背景图片的摆放以 content 区域为参考
background-clip
background-clip 背景剪裁属性是指定背景（背景图片或颜色）的 绘制 区域。
border-box ：背景区域延伸到边框（但是在边框下层）
padding-box ：背景区域延伸到 内边距
content-box ：背景区域延伸到内容区
text ：背景被裁剪成文字的前景色。需要加上前缀 - webkit -background-clip: text;
渐变 Gradient
CSS3 渐变（gradients）可以让在两个或多个指定的颜色之间显示平稳的过渡。对比使用渐变图片，gradients 可以减少下载的时间和 宽带 的使用，并且在放大时看起来效果更好。
线形渐变
颜色值沿着一条隐式的 直线 逐渐过渡。由 linear-gradient() 产生。
为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个 方向 （或一个角度）。
/* 渐变轴为45度，从蓝色渐变到 红色 */ linear-gradient(45 deg , blue, red ); /* 从右下到左上、从蓝色渐变到红色 */ linear-gradient(to left top, blue, red); /* 从下到上，从蓝色 开始 渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */ linear-gradient(0deg, blue, green 40%, red);
语法
linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop-list> )
<angle> ：用角度值指定渐变的方向（或角度）。角度顺时针增加。
<side-or-corner> ：描述渐变线的起始点位置。 to top , to bottom , to left 和 to right 这些值会被转换成角度 0 度 、 180 度 、 270 度 和 90 度 。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。 <color-stop-list> ：颜色变化列表。支持透明度（ rgba(255,0,0,0.1) ）。
径向渐变
radial-gradient() CSS 函数创建了一个图像，该图像的颜色值由一个中心点（原点）向外扩散并逐渐过渡到其他颜色值。
同样至少需要定义两种颜色节点，也可以指定渐变的中心（默认在中心点， center ）、形状（默认椭 圆 形 ellipse ）、大小（默认 farthest-corner ，表示到最远的角落）
语法
radial-gradient( [ Shape size at position] ? <color-stop-list> [ , <color-stop-list> ]+ )shape ：椭圆形（ ellipse ，默认）或圆形（ circle ） size ： closest-side ， 渐变的边缘形状与容器 距离 渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。 closest-corner ， 渐变的边缘形状与容器距离渐变中心点最近的一个角相交。 farthest-side ， 与 closest-side 相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。 farthest-corner ， 渐变的边缘形状与容器距离渐变中心点最远的一个角相交。 position ：可以是具体的两个位置偏移值（ 10% 20% ），也可以是关键字（left、right、top、bottom）
重复渐变
重复多次渐变图案直到足够填满指定元素。由 repeating-linear-gradient() 和 repeating-radial-gradient() 函数产生。
重复函数的参数同上，不同的是它会基于渐变长度（最后一个色标和第一个之间的距离）倍数重复。
.linear-repeat { background: repeating-linear-gradient(
to top left,
lightpink,
lightpink 5px,
white 5px,
white 10px
);
}.radial-repeat { background: repeating-radial-gradient(
powderblue,
powderblue 8px,
white 8px,
white 16px
);
}
更多编程相关知识，请访问：编程入门！！
以上就是 浅谈 CSS3中新增的背景属性&am p; 渐变函数（gradient）的详细内容，更多请关注其它相关 文章 ！
总结
以上是 为你收集整理的 浅谈CSS3中新增的背景属性&渐变函数（gradient） 全部内容，希望文章能够帮你解决 浅谈CSS3中新增的背景属性&渐变函数（gradient） 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于浅谈CSS3中新增的背景属性&渐变函数（gradient）的详细内容...