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. Nicescroll滚动条插件的用法

    Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件,不需要增加额外的css,几乎全浏览器兼容.ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触 ...

  2. 我的Mac必备软件

    1.Svn工具: Cornerstone_v2.7.10 2.iPhone配置文件管理 iPhoneConfigUtility.dmg 3.有道 for mac http://cidian.youda ...

  3. IIS6.0 开启Gzip与PHP Gzip

    因为在做一个项目,项目里面服务器主要提供数据,但是数据多了文件就大了,比较浪费流量和时间,我们便用Gzip来处理.我在本机上是apache,服务器上是IIS6.0,用的是php,那么我就在这里分享一下 ...

  4. tcp/ip协议中的SYN, ACK的数值变化

    还需要论述一下seq.ack表示什么意思,应该以什么样的角度去理解这两个序列号. sequence number:表示的是我方(发送方)这边,这个packet的数据部分的第一位应该在整个data st ...

  5. Linux中crontab无法执行java程序的问题

    Linux中crontab无法执行java程序的问题 jdk环境变量配置问题:可以用全路径来解决: 竟然是kill -9之后,后面的脚本都不运行,这个还没有找到原因啊: 即便是系统级别的 ls 命令, ...

  6. Elasticsearch入门基础(1)

    基础概念 Elasticsearch有几个核心概念.从一开始理解这些概念会对整个学习过程有莫大的帮助. 接近实时(NRT)         Elasticsearch是一个接近实时的搜索平台.这意味着 ...

  7. ckeditor 实现图片上传以及预览（亲测有效）

    引用ckeditor <script type="text/javascript" src="static/ckeditor/ckeditor.js"&g ...

  8. java中循环控制结构

    1. break结束break所在循环 for(i……) { for(j……) { break;  //结束循环j } } 2.带标签的break. java中的标签只用在循环语句前面. outer: ...

  9. 【找规律】HDU 4662——MU Puzzle

    来源:点击打开链接 这个题目的来源是人工智能领域MU猜想.比赛的时候也参考了相关资料,可是最后差一点没有把规律推出来. 注意到以下几个性质.第一,MI怎么变换M永远只能在第一位.第二,因为变换时只能在 ...

  10. PHP 5 时区

    PHP 5 时区 PHP 支持的时区 下面是 PHP 支持的时区的完整列表,这些对一些 PHP 日期函数很有用. 非洲 美洲 南极洲 北冰洋 亚洲 大西洋 大洋洲 欧洲 印度洋 太平洋 非洲 Afri ...