css3新属性background-origin用法实例详解说明

laoyuan 2017-01-23 标签：css3 阅读: 2,668

在css3中，相信大多人都知道，css3增加了一些新的背景属性：比如：background-origin、background-size、background-clip属性，在以往的css中，关于css的background属性，大家应该都已经很熟悉了，因为background是使用率很高的一个属性。我们知道，css3之前的背景属性包括有：

1、background-color（背景颜色）
2、background-image（背景图片）
3、background-repeat（背景铺放方式）
4、background-attachment（背景固定或者滚动设置）
5、background-position（背景图片定位）

那么，本文今天要说明的是css3的background-origin。

css3背景原点属性background-origin

css3背景原点属性主要是用来规定 background-position属性相对于什么位置来定位的，即决定背景图片定位的起点，默认值为padding-box，更简单一点说就是，background-origin可以决定背景是从哪个区域开始绘制的(从border、padding或content区域)。

语法：

background-origin ：padding-box | border-box | content-box

取值说明：

padding-box：背景图像相对于内边距框来定位。
border-box：背景图像相对于边框盒来定位。
content-box：背景图像相对于内容框来定位。

在看background-origin示例之前，我们先来看一下background-image默认是从什么位置填充元素的，示例代码如下：

html:

<div class="ui-bg ui-bg-image"></div>

css:

.ui-bg{
     width: 290px; 
     height: 178px; 
     border-radius: 5px; 
     border:10px solid rgba(0,0,0,0.4); 
     margin: 10px;
}
.ui-bg-image{
     background:url(/demo/source/origin.png) no-repeat; 
}

效果：

从图中可以看出，background-image, 默认是从元素的padding左上角到边框边缘的右下角的。默认的起始位置是从padding开始的。而background-origin刚好可以改变它的位置（background-position）。下面看demo:

以下是demo图片的css基础代码为：

  .bg{ 
    width: 300px; 
    height: 188px; 
    border-radius: 5px; 
    border:10px solid rgba(0,0,0,0.3); 
    padding: 20px; 
    background:url(origin.png) no-repeat; 
    margin: 10px;
  }
  .bg p{ 
    background: rgba(0,0,0,0.5); 
    height: 50px; 
    color: #fff; 
    font-weight: 600; 
    font-size: 18px;
  }
  .origin-1{
    -webkit-background-origin: padding-box;
    -moz-background-origin: padding-box;
    background-origin: padding-box;
  }
  .origin-2{
    -webkit-background-origin: border-box;
    -moz-background-origin: border-box;
    background-origin: border-box;
  }
  .origin-3{
    -webkit-background-origin: content-box;
    -moz-background-origin: content-box;
    background-origin: content-box;
  }

html:

<div class="bg origin-1">
   <p>我是内容区域</p>
</div>
<div class="bg origin-2">
   <p>我是内容区域</p>
</div>
<div class="bg origin-3">
    <p>我是内容区域</p>
</div>

1、background-origin ：padding-box

因为background-origin默认值为padding-box ，那么这时背景图片是从padding的起始位置开始定位，也就是下图中红线的地方（给上面那个例子一样）。