background-origin:border-box;
此时设置background-size:contain;

根据容器的边框定位

例如：容器的盒模型如下：设置了padding:20px;border:rgba(0,0,0,0.5) solid 10px;

　　

background-origin:content-box;

此时设置background-size:contain;

　　

background-origin:padding-box/inherit;

此时设置background-size:contain;

　　

background-origin:content-box;

此时设置background-size:conver;
右侧padding+border并未隐藏

　　

background-origin:padding-box/inherit;

此时设置background-size:cover;

右侧border并未隐藏

　　

background-origin:规定 background-position 属性相对于什么位置来定位的更多相关文章

  1. 深入理解css中position属性及z-index属性

    深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...

  2. css中的position属性值的探究

    css的position属性指定了元素的定位类型,然后通过top,botton,left,right来具体定位. 在具体定位之前必须使用position属性,否则所有的具体定位属性都无法生效. pos ...

  3. 深入理解css中position属性及z-index属性 https://www.cnblogs.com/zhuzhenwei918/p/6112034.html

    深入理解css中position属性及z-index属性 请看出处:https://www.cnblogs.com/zhuzhenwei918/p/6112034.html 在网页设计中,positi ...

  4. 510，position的值，relative和absolute定位原点是

    (absolute:生成绝对定位的元素) position属性用来规定元素的定位类型和方式 ①position:static 默认值,没有定位,元素出现在正常的流中: ②position:fixed  ...

  5. css3-background clip 和background origin

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

  6. 由position属性引申的关于css的进阶讨论（包含块、BFC、margin collapse）

    写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的 ...

  7. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  8. DIV的Position属性和DIV嵌套DIV

    1.前言 我们在利用div+css进行布局时,常常被div的位置弄的焦头烂额,很多人甚至放弃了div而直接用table.这里一如既往的推荐使用div布局,其实我们只要掌握了div的position属性 ...

  9. css中关于position属性的探究（原创）

    关于position属性的设置,头脑中一直觉得不是很清楚,所以借助这次机会单独自己测试了一下,记作学习笔记.   首先,css的position属性包含下面四种设置情况: static:默认属性.指定 ...

随机推荐

  1. ArrayList的使用和List<T>的比较

    使用非泛型集合类的限制可以通过编写一小段程序来演示,该程序利用 .NET Framework 基类库中的 ArrayList 集合类.ArrayList 是一个使用起来非常方便的集合类,无需进行修改即 ...

  2. 字符串转成整型(int)

    1 题目 Implement atoito convert a string to an integer. Hint: Carefullyconsider all possible input cas ...

  3. 【Linux】linux bash shell之变量替换：:=句法、=句法、:-句法、-句法、=?句法、?句法、:+句法、+句法

    linux bash shell之变量替换::=句法.=句法.:-句法.-句法.=?句法.?句法.:+句法.+句法   linux bash shell之变量替换::=句法.=句法.:-句法.-句法. ...

  4. 性能调优的Windows窗体DataGridView控件

    性能调优的Windows窗体DataGridView控件 . 净框架4.5     在处理大量数据时, DataGridView 控制可以消耗大量的内存开销,除非你仔细地使用它. 在客户有限的内存,你 ...

  5. GNU Make - 内部变量的赋值和改变

    1. 赋值和显示 采用$(info $(variable_name))显示内部变量 eg: FOO=bar $(info $(FOO)) 运行结果: #: make bar 2. 从命令行外部改变 B ...

  6. iOS 检查app版本更新操作

    iOS 检查app版本更新操作 1:获取本地安装的版本信息: [NSString stringWithFormat:@"Version %@ (%@)", [[[NSBundle ...

  7. 设计模式 - 模板方法模式(template method pattern) 具体解释

    模板方法模式(template method pattern) 详细解释 本文地址: http://blog.csdn.net/caroline_wendy 模板方法模式(template metho ...

  8. 安卓手机使用Fiddler抓获HTTPS报文方法

    Configure Fiddler Click Tools > Fiddler Options > Connections. Ensure that the checkbox by All ...

  9. Spring MVC 中 AJAX请求并返回JSON

    一.以ModelAndView的方式返回 先看下JavaScript代码: /** * 保存-同步(版本控制库) */ function saveSynchronizedVcHorse(obj) { ...

  10. std::nothrow

    std::nothrow 1.在内存不足时,new (std::nothrow)并不抛出异常,而是将指针置NULL. 若不使用std::nothrow,则分配失败时程序直接抛出异常. 2.使用方式: ...