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. oc 第五天(内存管理)

    OC的重点: 内存管理 1 基本原理     OC的内存回收机制是和JAVA的自动回收机制是不同的,它有两种模式,或者准确的说是同 一种模式的两种不同体现,下面简单总结下. 1手动内存回收       ...

  2. go语言基础之全局变量

    1.全局变量 示例: package main import "fmt" func test() { fmt.Println("test a =", a) } ...

  3. DGN格式转化为shp格式 【转】

    其实本来,我就是需要把一个autocad的dwg/dgn格式的东西导入到google earth里面:但是首先我对dwg/dgn格式的东西根本就不熟:其次我拿到的dwg/dgn格式文件是用的HK80 ...

  4. Android -- 使用主题配置文件，去掉程序启动界面的短暂黑屏

    关于黑屏 默认的情况下,程序启动时,会有一个黑屏的时期,原因是,首个activity会加载一些数据,比如初始化列表数据等. 去除步骤 1./res/values/styles.xml 在 Theme ...

  5. 红帽RHOP 8 发布一条龙方案

    导读 日前,Canonical的Ubuntu在OpenStack的云系统方面处于业界领先地位.其他诸如IBM类顶级科技公司也有意加入OpenStack的混战,新的专用OpenStack公司(例如Mir ...

  6. NotePad++ 显示字符

    转: http://shouce.jb51.net/notepad_book/npp_func_show_special_char.html

  7. minigui杂项

    官方下载地址 MiniGUI简介 http://www.minigui.com/zhcn/download/ MiniGUI3.0.12 移植到mini2440 在海思hi3520上移植minigui ...

  8. 缺少网络连接需要的Windows套接字注册表项（浏览器无法连网）

      缺少网络连接需要的Windows套接字注册表项(浏览器无法连网) CreateTime--2018年4月25日14:17:42 Author:Marydon 1.异常信息 此计算机上缺少一个或多个 ...

  9. MySQL中的锁、隔离等级和读场景

    一.导言 关于MySQL中的锁还有隔离等级这类话题,其概念性的解释早已泛滥.记住其概念,算不上什么.更重要的是思考:他们的区别和联系在哪儿,为什么会有这样的概念. 1)MySQL的锁(Lock)分为行 ...

  10. 初学者必知的Python中优雅的用法

    转自:http://python.jobbole.com/81393/