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的内边缘)开始显示背景图片;

有一点需要提出,在IE8以下版本解析是不一样的,在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位置,并且其只能控制背景图片。

CSS3 Background-origin的更多相关文章

  1. css3 & background & background-image

    css3 & background & background-image https://developer.mozilla.org/en-US/docs/Web/CSS/backgr ...

  2. css3-background clip 和background origin

    1.background-origin background-origin 里面有3个参数 : border-box | padding-box | content-box; border-box,p ...

  3. css3 background

    background是一个很重要的css属性,在css3中新增了很多内容.一方面是原有属性新增了属性值,另一方面就是新增了3个属性. 一.css3中新增属性值介绍 css2的background有5个 ...

  4. CSS3 background属性

    background: #00FF00 url(bgimage.gif) no-repeat fixed top; background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性: ...

  5. CSS3详解:background

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  6. css2和CSS3的background属性简写

    1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  backg ...

  7. CSS3中background属性的调整

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  8. 前端小知识~~关于css3新增知识~~归纳总结

    1.新增选择器 E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:on ...

  9. 深入了解——CSS3新增属性

    CSS3 选择器(Selector) 写过 CSS 的人应该对 CSS 选择器不陌生,我们所定义的 CSS 属性之所以能应用到相应的节点上,就是因为 CSS 选择器模式.参考下述代码: 清单 1. C ...

  10. <转载>css3 概述

    参照 https://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/ http://www.cnblogs.com/ghost-xyx/p ...

随机推荐

  1. serialize()与serializeArray()

    1.了解serialize()与serializeArray() serialize()序列化表单元素,用于ajax请求, serializeArray()序列化表单元素,类似于serialize,但 ...

  2. 【spring源码分析】IOC容器初始化(三)

    前言:在[spring源码分析]IOC容器初始化(二)中已经得到了XML配置文件的Document实例,下面分析bean的注册过程. XmlBeanDefinitionReader#registerB ...

  3. Centos7安装搜狗输入法.

    系统默认安装输入法管理器的是 ibus. 而搜狗使用 fcitx 1.以我们先要安装 fcitx和必要的软件包 yum -y install fcitx* yum -y install libQtWe ...

  4. 《你必须掌握的Entity Framework 6.x与Core 2.0》正式出版感想

    前言 借书正式出版之际,完整回顾下从写博客到写书整个历程,也算是对自己近三年在技术上的一个总结,整个历程可通过三个万万没想到来概括,请耐心阅读. 写博.写书完整历程回顾 从2013年12月注册博客园账 ...

  5. Spring Boot与消息

    一.概述 1. 大多应用中,可通过消息服务中间件来提升系统异步通信.扩展解耦能力 2. 消息服务中两个重要概念: 消息代理(message broker)和目的地(destination) 当消息发送 ...

  6. 一入OI深似海 1 —— 偶然遇见,命运选择

    记得还是三年级(还是四年级?人老了都忘了)吧, 那时候我还是个愣头青, 学校的编程班在每个班强制招人, 我就屁颠屁颠被赶去去上课了. 一开始的课完全听不懂, 导致没过多久我同班的人一个个走了, 我为了 ...

  7. JS confirm或alert对话框中的换行

    如题. alert.confirm对话框的换行可以使用回车符或换行符:\n,\r 也可以使用回车符或换行符对应的unicode编码:\u000a,\u000d,这是等效的. //确认信息 var co ...

  8. python多线程场景下print丢失

    python多线程情况下,print输出会出现丢失的情况,而logging模块的日志输出不会. 以下是示例代码,多运行几次就会发现这个有意思的现象 # coding:utf-8 import thre ...

  9. OO第一次单元总结

    第一次总结性博客 16071070 陈泽寅 2019.3.23 一.第一单元所学总结 首先先来总结一下第一单元我所学到的知识以及所感所悟.第一个单元,是我第一次接触JAVA语言,并且再使用了几次之后, ...

  10. 一、Log4Net配置

    Core的配置 一.创建core包含控制和视图的项目以及Log4Net引用 二.创建Log4Net配置文件 右击项目->添加文件   Log4Net.config 2 复制以下代码 以下配置可做 ...