CSS3 Backgrounds相关介绍

最新推荐文章于 2024-07-09 08:53:54 发布

dengchen5736

最新推荐文章于 2024-07-09 08:53:54 发布

阅读量85

点赞数

原文链接：http://www.cnblogs.com/NatChen/p/8193648.html

版权

CSS3 Backgrounds相关介绍

1.背景图片(background images)是在padding-box的左上角落脚安家的,我们可以使用background-position属性改变默认的位置。

2.在CSS3中，我们可以给background-position属性指定高达4个值:开始的两个值代表了水平轴;后面的两个值代码垂直轴,这意味着我们可以相对于上下左右任意一个角落定位，而不是之前的只能相对于左上角定位。

3.我们可以使用正值决定背景图片的位置，也可以使用负值。正值所产生的效果是把背景图片往右下方移动——元素背景区域内部。负值产生的效用是把背景图片往左上方向移动——元素背景区域外面。

p{ background-position:left 10px top 15px; }

4.background-repeat默认情况下，背景图片会沿着x轴，y轴重复。同样的，是起始于padding-box的左上角。在CSS3中，我们定义repeat的时候可以使用两个值代替一个值。其中第一个值代表水平轴;第二个repeat表示垂直轴;如果我们只使用一个值，浏览器会自动解释成两个值。这就保证了background-repeat属性向后兼容。

div{background-repeat:repeat repeat;}

5.CSS3允许我们使用background-repeat属性两个新值：space和round。space值的功效可以简单理解为图片的两端对齐平铺，多出来的空间用空白代替;round属性的效果也可以说是两端对齐，但其多出来空间通过自身的拉伸来填充。不过需要注意的是使用这种方法图片可能会被拉伸或扭曲。这些新值让我们在布局背景图片的时候更灵活了。例如我们可以使用两个值来定义不同的垂直和水平行为：

div{background-repeat:space no-repeat;}

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

background-origin
background-clip
background-size

6.1background-origin是用来决定背景图片定位在哪个盒子中。我们可以使用background-origin属性的三个值进行背景图片的定位，它们是：content-box、padding-box以及border-box。

6.2background-clip属性是用来决定在背景区域中背景图片剪裁的位置。其支持三个值，为：content-box、padding-box以及border-box。
6.3在CSS3中允许我们使用background-size属性来控制背景图片的大小。我们可以使用长度值或是百分比，或者是两个新的关键字：contain和cover。如果只设置了一个值，那么第二个值会自动用初始值”auto“代替。“contain“值的效用是按比例将图片缩放到最大尺寸以使其高宽都在背景区域里面，其主要用在背景图片比容器大的情况下。需注意使用该值图片可能有扭曲。“cover“值的效用是按比例将图片缩放到最小尺寸以使其完整覆盖背景区域，其主要用在背景图片比容器小的情况下。需注意使用该值图片可能有扭曲。