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. Linux下解决 id_rsa 权限不够

    问题 @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @         WARNING: UNPROTECTED PRIVAT ...

  2. java学习笔记9--内部类总结

    java学习笔记系列: java学习笔记8--接口总结 java学习笔记7--抽象类与抽象方法 java学习笔记6--类的继承.Object类 java学习笔记5--类的方法 java学习笔记4--对 ...

  3. Linux CentOS7 系统目录详解

    1.目录结构 2.文件类型 LINUX有四种基本文件系统类型:普通文件.目录文件.连接文件和特殊文件,可用file命令来识别.  普通文件:如文本文件.C语言元代码.SHELL脚本.二进制的可执行文件 ...

  4. text-overflow样式属性值ellipsis的用法

            一.div标签中使用text-overflow样式属性值ellipsis的方法: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

  5. mysql 下 计算 两点 经纬度 之间的距离

    公式如下,单位米: 第一点经纬度:lng1 lat1 第二点经纬度:lng2 lat2 round(6378.138*2*asin(sqrt(pow(sin( (lat1*pi()/180-lat2* ...

  6. Thinkphp学习笔记1-URL模式

    PATHINFO模式 PATHINFO模式是系统的默认URL模式,提供了最好的SEO支持,系统内部已经做了环境的兼容处理,所以能够支持大多数的主机环境.对应上面的URL模式,PATHINFO模式下面的 ...

  7. [Android exception] /data/app/com.tongyan.tutelage-1/lib/arm/libstlport_shared.so: has text relocations

    java.lang.UnsatisfiedLinkError: dlopen failed: /data/app/com.tongyan.tutelage-1/lib/arm/libstlport_s ...

  8. windows vbs启动多个应用程序并使程序最小化（显示桌面）

      windows vbs启动多个应用程序并使程序最小化(显示桌面) CreationTime--2018年7月26日11点18分 Author:Marydon 1.应用场景 每天开机后,都需要打开平 ...

  9. BerkeleyDB java的简单使用

    关于BerkeleyDB的有点和优点,列在以下 JE offers the following major features: Large database support. JE databases ...

  10. mysql last_insert_id() （转载）

    先来看看官方的说明 The ID that was generated is maintained in the server on a per-connection basis. This mean ...