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. HTML5 input file控件使用accept过滤限制的文件类型以及在谷歌下打开很慢的问题

    在文件上传控件(input type='file')中,可以通过accept属性实现对文件类型的过滤. 一.相关代码: 下面给出对应的文件上传控件代码: <input type="fi ...

  2. 想搞机器学习，不会特征工程？你TM逗我那！

    原文:http://dataunion.org/20276.html 作者:JasonDing1354 引言 在之前学习机器学习技术中,很少关注特征工程(Feature Engineering),然而 ...

  3. Qt 之 QtConcurrent

    本文以 Qt 中的 QtConcurrent::run() 函数为例,介绍如何将函数运行在单独的某一个线程中. 1  QtConcurrent::run() QtConcurrent 是一个命名空间, ...

  4. Python Web Scraper - Simple Url Request

    from urllib.request import urlopen html = urlopen("http://www.baidu.com") print(html.read( ...

  5. GO！自制一款【不丑】的名片

    大概每一个人都有自己的名片.也见过不少名片. 我敢打赌,你常常认为很多名片"不咋地".尽管不是全部人都具备一定的审美眼光,但实际上每一个人都具备较高的"审丑"眼 ...

  6. 算法笔记_132:最大流量问题（Java）

    目录 1 问题描述 2 解决方案   1 问题描述 何为最大流量问题? 给定一个有向图,并为每一个顶点设定编号为0~n,现在求取从顶点0(PS:也可以称为源点)到顶点n(PS:也可以称为汇点)后,顶点 ...

  7. CentOS6.5搭建MySQL5.1主从复制

    环境: mysql> select version(); +------------+ | version() | +------------+ | 5.1.73-log | +-------- ...

  8. 开源微内核seL4

    微内核 越大的系统潜在的bug就越多.所以微内核在降低bug方面非常有优势,seL4是世界上最小的内核之中的一个.可是seL4的性能能够与当今性能最好的微内核相比. 作为微内核,seL4为应用程序提供 ...

  9. Ubuntu14.04怎样使用root登录

    1.打开终端 2.sudo gedit /usr/share/lightdm/lightdm.conf.d/50-ubuntu.conf 3.在弹出的编辑框里输入:greeter-show-manua ...

  10. 按钮CSS样式

      CreateTime--2017年5月5日11:23:18Author:Marydon 按钮CSS样式 实现效果: <input type="button" onclic ...