CSS Background-origin(转)

 

CSS Background-origin原文

 

Background-origin是CSS3为Background扩展的第三个属性，从Background-origin字面上不难发现是指背景图片的原点，其实background-origin主要就是用来决定背景图片的定位原点，换句话说就是背景图片定位的起点（background-position的原点）如果你看过了《CSS3 background-clip》一文，你不难发现，元素Background中的background-color原点位置是在Border的外边缘处，而background-image的原点是在元素的padding外边缘处（也就是在元素border的内边缘处），下面一起重新看看在《CSS3 background-clip》中所展示的background模型图：

 

上图展示的是元素默认时的背景图像原点位置，那我们如休何使用background-origin来改变背景图片的position位置呢？想知道答案的就一起接着往下看吧：

 

语法：

background-origin在早期的Webkit和Gecko内核浏览器（Firefox3.6-,Safari和Chrome代版本）他们都支持一种老式的语法规则，类似于background-clip在Firefox3.6以下的版本一样

 

   background-origin:  padding || border || content 

 

那么在那些现代浏览器都支持的是一种新的语法

 

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

 

为了兼容新老版本的浏览器，在使用background-origin改变background-position的原点位置时，最好老旧语法一起 加上，并且新语法放在老语法后面，这样只要是支持新语法规则的浏览器就自动会识别background-origin的最新语法

 

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

 

取值说明：

1、padding-box(padding):此值为background-origin的默认值，决定background-position起始位置从padding的外边缘（border的内边缘）开始显示背景图片；

2、border-box(border):此值决定background-position起始位置从border的外边缘开始显示背景图片；

3、content-box(content):此值决定background-position起始位置从content的外边缘（padding的内边缘）开始显示背景图片；

有一点需要提出，在ＩＥ8以下版本解析是不一样的，在IE7以下版本background-origin默认是从border开始显示背景图片。

 

兼容浏览器：

 

background-origin虽然现代浏览器都支持，但在不同内核浏览器下还是需要带上其各自的前缀，这样在实际应用中最好按下面的语法规则书写，以保证只要支持background-origin的都能正常运行：

 

   /*Old Webkit and Gecko*/
   -moz-background-origin: padding || border || content;
   -webkit-background-origin: padding || border || content;
   /*New Webkit and Gecko*/
   -moz-background-origin: padding-box || border-box || content-box;
   -webkit-background-origin: padding-box || border-box || content-box;
   /*Presto*/
   -o-background-origin: padding-box || border-box || content-box;
   /*W3c标准*/
   background-origin: padding-box || border-box || content-box;

 

有关于这方面更详细的介绍大家可以点击这里。

上 面主要介绍了background-origin相关方面的理论知识，下面我们同样针对background-origin的三个属性值padding- box,border-box,content-box在实际应用中对background-position有哪些影响。

先给他们创建一个Demo:

 

  <div class="demo"></div>

 

加上基本的CSS样式

 

  .demo {
    font-size: 16px;
    font-weight: bold;
    color: red;
    width: 220px;
    height: 80px;
    padding: 20px;
    border: 20px dashed rgba(255,0,0,0.8);
    /*加上背景图片，并且把背景色设置为green*/
    background: green url("../images/background-origin-bg.png") no-repeat;			
  }

  

现在我们给这个demo加上了一个背景图片，并且设置了其背景颜色为green，大家都知道这个Demo中的background-position为left top(0% 0% 或者 0 0),有关这方面详细介绍可以参考《CSS Background-size》一文中的background-position部分，这里不在花时间陈述。现在回到本节的正题上来，先看这个demo的最初效果吧：

 

一、background-origin:padding-box

首先来看padding-box的应用，在前面的Demo基础上，给这个Demo加上background-origin:padding-box，具体如下所示

 

  .paddingBox {
     -moz-background-origin: padding;
     -webkit-background-origin: padding;
     -moz-background-origin: padding-box;
     -webkit-background-origin: padding-box;
     -o-background-origin: padding-box;
     background-origin: padding-box;
  }

 

效果：

 

看到效果后有些人一定会问，怎么和当初效果一样，没有任何效果变化呢？细心的你要是仔细看了前面的内容，你一定不会这样问，因为padding- box是background-origin的默认值 ，也就是说background-origin:padding-box就是使用background-position的起点在"left top"位置处，也是background-position的默认值。从而也就没有任何的变化。

 

二、background-origin:border-box

 

同样的方法，基于上面的demo，只是把相应的background-origin属性值改成border-box

 

  .borderBox {
     -moz-background-origin: border;
     -webkit-background-origin: border;
     -moz-background-origin: border-box;
     -webkit-background-origin: border-box;
     -o-background-origin: border-box;
     background-origin: border-box;
  }

 

效果：

 

现在效果明显变化了，背景图片从刚才的padding外边缘移动到了border的外边缘，其实background-position并没有改 变，依旧是left top；但是background-origin把background-position的原点位置改变了，从当初的padding外边缘移动到了 border的外边缘。在background-origin属性还没有出现时，做这样的效果，都是通过改变background-position的 值，就拿这个例子来说吧，我们边框的20px的大小，那么需要把背景图片从边框的外边缘处开始的话，那只有改变background-position的 初始值，也就是变成background-position:-20px -20px;如此一来，background-origin取值为border-box等于把background-position变成了负的边框宽 度：

  background-origin: border-box;
  等于把
  background-position: left top;
  变成了
  background-position: 一（左边框宽度） －（顶边边框宽度）; 

三、content-box

content-box是background-origin最后一个属性值，同样在前面的Demo基础上把background-origin的值换一下：

  .contentBox {
    -moz-background-origin: content;
    -webkit-background-origin: content;
    -moz-background-origin: content-box;
    -webkit-background-origin: content-box;
    -o-background-origin: content-box;
    background-origin: content-box;
  }

 

效果：

 

当background-origin值为content-box时，background-position的起点位置就由当初的padding 外边缘移动到现在content的外边缘处了，换句话说，background-position由当初的(left top)位置变成了现在的(20px 20px)，因为这个Demo的padding为20px。这样一来background-origin值为content-box 时，background-position位置将发生如下的变化：

 

  background-origin: content-box;
  等于把：
  background-position: left top;
  变成了：
  background-position: 左内边距  上内边距;

 

上面介绍了background-origin在取不同值时对background-position的影响，但大家发现了没有，上面实例都是在 background-attachment:scroll下。但是如果将background-attachment设置为fixed 时，background-origin将不起任何作用。并且background-origin取任何值将不会影响body中background- image的任何设置。

最后总结一下，background-clip主要是用来控制背景（背景色和背景图片）的显示区域，其主要配合background-origin来制作不同的效果；而background-origin主要是用来控制背景图片的background-position位置，并且其只能控制背景图片。