背景部分编程学习教程

本文主要介绍CSS编程学习课程的背景部分，这是CSS入门学习的基础知识，需要的朋友可以参考一下。
在CSS中，每个元素框都可以想象成由两个层组成。

前台层：内容（如文本或图片）和框架。

背景层：纯色填充（使用背景颜色属性），它可以包含更多的背景图像（使用背景图像属性），背景图像被叠加在背景色上。

图片只能在CSS3的浏览器实现添加背景颜色。现在，我们可以添加一些图片（和CSS3渐变的背景层）。

背景属性：

背景颜色
背景图像
背景重复
背景位置
背景大小
背景附件
背景（简写属性）
背景剪辑、背景来源、背景中断（目前尚未得到广泛支持）

背景颜色

格式：背景色：颜色值；
例如：背景颜色：# caebff；
背景图片

格式：背景图片：URL（图片路径图片文件名）；
例如：背景图像：URL（图像/ blue_circle。PNG）；

默认的背景图片从元素的左上角开始，在水平方向和垂直方向重复，最终填充整个背景区域。

背景重复

格式：背景重复：重复repeat-x垂直重复不重复| | |；
例如：背景重复：repeat-x；
解释uff1a

重复默认值在水平方向和垂直方向重复，直到背景区域被元素填充。
对repeat-x水平方向重复。
纵向平铺在垂直方向重复。
不重复不重复任何方向（只显示背景图片一次）。

背景位置

用于控制背景位置的背景位置属性是所有背景属性中最复杂的。

这个属性有5个键值，分别是上、左、下、右、中。这些关键字的任意两个组合可以用作此属性的值。

背景位置属性同时设置元素和图片的来源，原点决定元素和图片中一个点的水平和垂直坐标，默认情况下背景位置的原点在左上角。

在第一种情况下，使用关键字的设置位置，背景位置属性，高级，默认值和左，管理的出发点，重复的垂直和水平两个方向。例如，修改的出发点：P #中心{背景位置：中心；}（简化写作背景位置：中心，设置一个关键值，然后将另取相同的值。背景图片在段落的中心点开始。

在第二种情况下，使用百分比来设置位置。
例如：背景位置：50% 50%；然后设置背景重复不重复，你可以在背景区域实现图片效果。第一个值代表的水平位置，第二值代表的垂直位置。如果只有一个值，它是用来设置水平位置，和垂直位置将设置为中心。

在第三种情况下，数量的绝对或相对的是用单位。如果一个像素单元用于指定一个位置，左上角的图片放在元件的左上角的位置。此外，您还可以使用负值，左上角的图片可位于元，所以只有一些照片中可以看到的元素。当然，你也可以设置足够的正面价值的图片，并将图片右下角的元素的外部来达到相同的效果。

背景大小

背景的大小是由指定的CSS3控制背景图片的大小属性。

可以设置的值和含义如下：

50%：缩放图片，使其填充背景区域的一半。
100px 50px：调整图片宽100像素，高50像素。
封面：拉起图片，使其充分填充背景区域，保持宽度与高度之比。
包含：缩放图片以适合背景，保持宽高比。

注：在装配图上画一个小图会导致画面质量失真。

背景粘连

后台附件属性控制滚动元素内的背景图片是否与元素滚动。

属性值是：

背景图片与元素一起移动。

固定。背景图片不移动与元素滚动。

提示：背景附件：固定最常用于在体元素的中心添加一个浅色水印，这样水印就不会随页面移动。

简短的背景属性

例如：身体{ background: url（图片/水印。PNG）中心# FFF不重复包含固定；}
说明：属性很少在声明中写入（如不写重复），使用相应属性的默认值（重复）。
多背景图像

CSS3可以添加多个背景图像元素背景。

实例：

CSS代码将内容复制到剪贴板。
{ p
背景：
URL（图像/ turq_spiral。PNG）30px - 10px不重复，
URL（图像/ pink_spiral。PNG）145px 0px不重复，
URL（图像/ gray_spiral。PNG）140px - 30px没有重复，# ffbd75；
}

背景渐变

渐变是两种或两种以上颜色在一定长度之间的自然过渡。

提示：渐变是CSS帮助我们生成的背景图片。添加渐变可以使用背景图像属性或简写背景属性。

有两种梯度：

线性渐变。从元素的一端延伸到另一端。

放射性渐变，从元素到四边的一点偏离。

供应商前缀

鼓励浏览器厂商采用W3C的CSS3推荐尽早VSP的概念（供应商特定的前缀，前缀创建供应商）。

实例：
转换属性的标准语法是：
变换：skewx（45度）；

因为这个属性还没有完全确定，为了确保它可以在大多数浏览器和他们的实验实现中使用，我们应该在我们希望支持的浏览器中添加VSP，每个浏览器只使用每个人都能理解的属性声明：

CSS代码将内容复制到剪贴板。
-moz变换：skewx（45度）； / * * /火狐
WebKit的变换：skewx（45度）； / * * / Chrome和Safari
MS变换：skewx（45度）； / * * /微软Internet Explorer
- o-transform：skewx（45度）； / * * /歌剧
变换：skewx（45度）； / *端是W3C的标准属性* /

以下CSS3属性必须添加VPS：

CSS代码将内容复制到剪贴板。
边界图像翻译
线性梯度过渡
径向梯度背景*
转换背景图像*
变换的起源
>用于背景图片或渐变