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. C++实现委托机制(一)

    1.引言: 如果你接触过C#,你就会觉得C#中的delegate(委托)十分灵巧,它的用法上和C\C++的函数指针很像,但是却又比C\C++的函数指针更加灵活.并且委托可以一对多,也就是可以注册多个函 ...

  2. HTTPS服务器配置

    一.SSL证书申请 1.确认需要申请证书的域名 2.生成私钥和csr文件 在linux机器上执行以下命令生成私钥 #openssl genrsa -out server.key 2048 在linux ...

  3. Tapable 0.2.8 入门

    [原文:Tapable 0.2.8 入门] tapable是webpack的核心框架(4.0以上版本的API已经发生了变化),是一个基于事件流的框架,或者叫做发布订阅模式,或观察者模式,webpack ...

  4. 【转】javascript 中的很多有用的东西

    原文:https://www.cnblogs.com/ys-ys/p/5158510.html ---------------------------------------------------- ...

  5. （转）行为树（Behavior Tree）

    转自:http://www.cnblogs.com/konlil/archive/2011/04/23/2025954.html 如果要让游戏里的角色或者NPC能执行预设的AI逻辑,最简单的用IF.. ...

  6. 智能化的命令行工具-betty

    本文首先公布在 CSDN的文章编辑器实在太烂了,建议大家用Cmd Markdown.它不但支持markdown.还支持VIM模式. 智能化的命令行工具-betty betty tool command ...

  7. win8.1安装开发工具 vs2015 Visual Studio 2015 Preview Downloads

    1.首先全新安装win8.1 略 破解激活.... 2.安装Visual Studio 2015 Visual Studio 2015 是免费的,不存在破解版本, 如果安装过程中存在问题,建议先把本文 ...

  8. TortoiseSVN 源代码下载

    SVN的客户端软件TortoiseSVN http://tortoisesvn.tigris.org/ 这是我采用的 TortoiseSVN 的官方网站,页面上的两只小乌龟真的很好看. 目前最新的版本 ...

  9. SQL语句中拆分字段

    SELECT PARSENAME(replace(MONITOR_ROOM_ID,'^' , '.'), 1) AS RoomID FROM ZY_MONITOR_ROOM 遇到以前系统高人设计的表, ...

  10. IOS开发帐号与发布问题综合

    一.iOS开发:AD-HOC版应用测试方法:http://hi.baidu.com/kangle1208/item/163f39530abb4d3195eb05a7 二.plist的方式发布: 1.y ...