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. 会话追踪(session tracking)

    HTTP是一种无连接的协议,如果一个客户端只是单纯地请求一个文件(HTML或GIF),服务器端可以响应给客户端,并不需要知道一连串的请求是否来自于相同的客户端,而且也不需要担心客户端是否处在连接状态. ...

  2. (高精度运算4.7.24)UVA 10013 Super long sums(大数加法——某一位的数字可能大于10)

    /* * UVA_10013.cpp * * Created on: 2013年10月29日 * Author: Administrator */ #include <iostream> ...

  3. C#连接SQL Server数据库进行简单操作[转]

    环境:VS2010 + SqlServer 2008 首先,按照面向对象的程序设计思想,设计一个数据库操作工具类MyTool.cs,该类中封装了关于数据库连接和操作的方法,各个功能模块在需进行数据库操 ...

  4. ExtJS ComboBox 录入智能提示

    ExtJS ComboBox非常复杂,有很多的属性:其中有的属性是针对某一种特定的方案而设计的,不是所有情况下都有效.我想下拉选择能支持录入,并且录入时能智能提示,弄了半天可以了,但是只能是mode= ...

  5. Glide Picasso Fresco UIL 图片框架 缓存 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  6. (转)AS3 中，Function.apply、call中第一个参数的作用；与什么时候用

    http://blog.csdn.net/linjf520/article/details/8746064 大家在使用Function.apply或是call时,是否发现,第一个参数不知道怎么用,赋值 ...

  7. 【Caffe代码解析】Layer网络层

    Layer 功能: 是全部的网络层的基类,当中.定义了一些通用的接口,比方前馈.反馈.reshape,setup等. #ifndef CAFFE_LAYER_H_ #define CAFFE_LAYE ...

  8. gem 更新源设置，ruby安装

    gem sources --remove http://rubygems.org/ gem sources -a http://ruby.taobao.org/ gem sources -l 结果只有 ...

  9. MySQL 连接方式

    MySQL 连接方式 1:TCP/IP 套接字方式 这种方式会在TCP/IP 连接上建立一个基于网络的连接请求,一般是client连接跑在Server上的MySQL实例,2台机器通过一个TCP/IP ...

  10. 将web容器置于OSGi框架下进行web应用的开发

    将web容器置于OSGi框架下,其实就是将web容器做成OSGi支持的Bundle,再安装到OSGi框架中,这里使用的是Jetty容器. 1.创建一个Eclipse插件项目,在此插件下创建一个WebR ...