您现在的位置是：网站首页> 编程资料编程资料

CSS3 Backgrounds属性相关介绍_css3_CSS_网页制作_

2023-10-29 290人已围观

简介为了更好的驾驭背景图片，CSS3添加了3个新的background相关属性，以及一系列的相关属性值

CSS2.1中有5个background属性可以用来控制元素的背景。这5个属性是：

background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position

为了更好的驾驭背景图片，CSS3添加了3个新的background相关属性，以及一系列的相关属性值。

不过在我们与这几个新属性亲密接触之前需要知道3个重要的盒子。

三个盒子

假设现在有个容器，容器里面有些内容，虽然我们看不见，但是这些内容的外面是有一个盒子的，这个盒子就是content-box。

//zxx:这里的英文原文是：”The quick brown fox jumped over the lazy web developer. “，而实际上，这里的英文也不是最原始的，是作者从”The quick brown fox jumped over the lazy dog! “这句话改编而来的，至于这里的原话实际上没有什么特殊的意思，只是这句话包含了英文中全部的26个字母。这里，我按照字面意思整个了打油诗。

现在，如果我们给容器的每个边上增加padding，我们将会得到一个新的盒子，即padding-box。

如果我们给容器的每个边边框上边框（这里断句如下：每个边边框上边框）。我们将会迎来第三个盒子——border-box。

这三个盒子用来确定背景图片的落脚之处，以何种尺寸显示，以及哪个地方要修剪。

后面会专门花口水讲这三个盒子，但是，眼下，先揭开background-position以及background-repeat羞涩的面纱。

background-position

默认情况下，背景图片(background images)是在padding-box的左上角落脚安家的。如下图：

我们可以使用background-position属性改变默认的位置。

在CSS2.1中，我们可以使用两个值来决定背景图片相对于元素的位置。

其中第一个值决定了水平位置：

第二个值决定了垂直位置：

在CSS3中，我们可以给background-position属性指定高达4个值。

开始的两个值代表了水平轴：

后面的两个值代码垂直轴：

这是很强大的“装备”升级，这意味着我们可以相对于上下左右任意一个角落定位，而不是之前的只能相对于左上角定位。

正值和负值

我们可以使用正值决定背景图片的位置，也可以使用负值。

正值所产生的效果是把背景图片往右下方移动——元素背景区域内部。

负值产生的效用是把背景图片往左上方向移动——元素背景区域外面。

background-repeat

默认情况下，背景图片会沿着x轴，y轴重复。同样的，是起始于padding-box的左上角。尽管背景图片平铺起始于padding-box左上角，但是其从各个方向朝外面平铺，包括border区域。

在CSS2.1中，我们可以使用四个不同的关键字改变平铺的行为，如下：

repeatrepeat-xrepeat-yno-repeat

repeat repeat?

在CSS3中，我们定义repeat的时候可以使用两个值代替一个值。

其中第一个值代表水平轴：

第二个repeat表示垂直轴：

如果我们只使用一个值，浏览器会自动解释成两个值。这就保证了background-repeat属性向后兼容。

使用”sapce”和”round”

CSS3允许我们使用background-repeat属性两个新值：space和round。其兼容性如下表：

浏览器 space roundFirefox 3.6, Firefox 4 不支持

Safari 4, Safari 5 不支持

Chrome 10

IE6, IE7, IE8 不支持

IE9

Opera 10, Opera 11

space值的功效可以简单理解为图片的两端对齐平铺，多出来的空间用空白代替：

呈现效果大致如下：

round属性的效果也可以说是两端对齐，但其多出来空间通过自身的拉伸来填充。

呈现效果大致如下：

不过需要注意的是使用这种方法图片可能会被拉伸或扭曲。这些新值让我们在布局背景图片的时候更灵活了。例如我们可以使用两个值来定义不同的垂直和水平行为：

三个新属性

在CSS3中我们可以使用三个全新的属性，如下：

background-originbackground-clipbackground-size

background-origin

关于CSS3 background-origin基础知识以及效果demo可以参见这里。background-origin是用来决定背景图片定位在哪个盒子中。我们可以使用background-origin属性的三个值进行背景图片的定位，它们是：content-box、padding-box以及border-box。