今天小编跟大家讲解下有关CSS中的背景部分编程学习教程 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS中的背景部分编程学习教程 的相关资料，希望小伙伴们看了有所帮助。
在CSS里面 每个元素盒子都可以想象成由两个图层组成。
前景层：内容（如文本或图片）和边框。
背景层：用实色填充（使用 background-color 属性） 也可以包含任意多个背景图片（使用 background-image 属性） 背景图片叠加在背景颜色之上。
在 CSS3 被浏览器实现之前 只能在背景颜色上添加一张图片。而现在 我们可以为背景图层添加多张图片（以及 CSS3 渐变）。
CSS背景属性：
background-color background-image background-repeat background-position background-size background-attachment background（简写属性） background-clip、background-origin、background-break（目前尚未得到广泛支持）
背景颜色
格式：background-color: 颜色值;示例：background-color: #caebff;
背景图片
格式：background-image:url(图片路径/图片文件名);示例：background-image:url(images/blue_circle.png);
默认情况下背景图片会 以元素左上角为起点 沿水平和垂直方向重复出现 最终填满整个背景区域。
背景重复
格式：background-repeat: repeat | repeat-x | repeat-y | no-repeat;示例：background-repeat:repeat-x;说明：
repeat 默认值 水平和垂直方向都重复 直至填满元素的背景区域为止。 repeat-x 水平方向重复。 repeat-y 垂直方向重复。 no-repeat 任何方向上都不重复（只让背景图片显示一次）。
背景位置
用于控制背景位置的 background-position 属性 是所有背景属性中最复杂的。
该属性有5个关键字值 分别是 top、left、bottom、right 和 center 这些关键字中的任意两个组合起来都可以作为该属性的值。
background-position 属性同时设定元素和图片的原点。原点决定了元素和图片中某一点的水平和垂直坐标。默认情况下 background-position的原点位于左上角。
第一种情况 使用关键字来设定位置。background-position属性的默认值 top、left 控制着水平和垂直方向重复的起点。如修改 起点位置：p#center {background-position:center center;}（简化写法：background-position:center 设定一个关键值 则另一个也会取相同的值。） 背景图片就会以段落的中心点为起点。
第二种情况 使用百分比来设定位置。 示例：background-position:50% 50%; 再把 background-repeat 设定为 no-repeat 就能实现了图片在背景区域内居中的效果。第一个值表示水平位置 第二个值表示垂直位置。要是只设定一个值 则将其用来设定水平位置 而垂直位置会被设为 center。
第三种情况 使用绝对或相对单位的数值。要是使用像素单位来设定位置 那么图片的左上角会被放在距离元素左上角指定位置的地方。另外 还可以使用负值 这样可以把图片的左上角定位到元素外部 从而在元素中只能看到部分图片。当然也可以给图片设定足够大的正值 把图片的右下角推到元素外部实现同样的效果。
背景尺寸
background-size 是 CSS3 规定的属性 用来控制背景图片的尺寸。
可设定的值和含义如下：
50%：缩放图片 使其填充背景区的一半。 100px 50px：把图片调整到 100 像素宽 50 像素高。 cover：拉大图片 使其完全填满背景区；保持宽高比。 contain：缩放图片 使其恰好适合背景区；保持宽高比。
注意：把很小的图片拉大会导致图片质量失真。
背景粘附
background-attachment属性控制滚动元素内的背景图片是否随元素滚动而滚动。
属性值有：
scroll。背景图片随元素移动。
fixed。背景图片不会随元素滚动而移动。
提示：background-attachment:fixed 最常用于给 body 元素中心位置添加淡色水印 让水印不随页面滚动而移动。
简写背景属性
示例：body {background:url(images/watermark.png) center #fff no-repeat contain fixed;}说明：声明中少写了哪个属性的值（比如没写 no-repeat） 就会使用相应属性的默认值（ repeat）。
多背景图片
CSS3 可以给元素背景添加多个背景图片。
示例：
CSS Code复制内容到剪贴板 p{ background: url(images/turq_spiral.png)30px-10pxno-repeat, url(images/pink_spiral.png)145px0pxno-repeat, url(images/gray_spiral.png)140px-30pxno-repeat,#ffbd75; }背景渐变
渐变 就是在一定长度内两种或多种颜色之间自然的过渡。
提示：渐变是 CSS 帮我们生成的背景图片。添加渐变可以使用 background-image 属性 也可以使用简写 background 属性。
渐变分两种：
线性渐变。从元素的一端延伸到另一端。
放射性渐变。从元素内一点向四周发散。
厂商前缀
为鼓励浏览器厂商尽早采用 W3C 的 CSS3 推荐标准 于是就产生了 VSP（Vendor Specific Prefixes 厂商前缀）的概念。
示例：transform 属性的标准语法是这样的：transform: skewX(-45deg);
由于这个属性还没有完全定案 为保证在大多数浏览器以及它们的实验性实现中能够使用这个属性 应该针对想要支持的浏览器为该属性添加 VSP。每个浏览器只使用各自能理解的属性声明：
CSS Code复制内容到剪贴板 -moz-transform:skewX(-45deg); -webkit-transform:skewX(-45deg); -ms-transform:skewX(-45deg); -o-transform:skewX(-45deg); transform:skewX(-45deg);以下 CSS3 属性必须加 VPS：
CSS Code复制内容到剪贴板 border-imagetranslate linear-gradienttransition radial-gradientbackground* transformbackground-image* transform-origin >*针对背景图片或渐变来源：爱蒂网
