1.background-origin

background-origin 里面有3个参数 ： border-box | padding-box | content-box;

border-box,padding-box,content-box从边框，还是内边距（默认值），或者是内容区域开始显示。

代码演示：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>背景</title>

    <style type="text/css">

        .wrap {

            width:220px;

            border:10px dashed salmon;

            padding:20px;

            font-weight:bold;

            color:#;

            background:#ccc url(.png) no-repeat;

            background-origin: border-box;

            position: relative;

        }

        .content {

            height:80px;

            border:1px solid #;

        }

    </style>

</head>

<body>

<div class="wrap">

    <div class="content">content</div>

</div>

</body>

</html>

插入的图片放在本地：

效果如图：

（1）padding-box

(2)content-box

(3)border-box

2.background cllip

用来将背景图片做适当的裁剪以适应实际需要。

语法：

background-clip ： border-box | padding-box | content-box | no-clip

代码演示：
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>背景原点</title>

    <style type="text/css">

        .wrap {

            width:220px;

            border:10px dashed salmon;

            padding:20px;

            font-weight:bold;

            color:#;

            background:#ccc url(.png) no-repeat;

            background-clip:border-box;/*  改变background的值, border-box | padding-box | content-box | no-clip */
position: relative; } .content { height:80px; border:1px solid #; } </style> </head> <body> <div class="wrap"> <div class="content">content</div> </div> </body> </html>
效果如图：
（1）border-box

图片没有从左边框开始
（2）padding-box

(3)content-box

(4)backround clip 和background origin的区别

background-clip的真正作用是决定背景在哪些区域显示。

background-origin是指背景显示的区域，或者说背景是从哪个区域开始绘制的(边框、补白或内容区域)

background origin

（1）padding-box

(2)content-box

(3)border-box

background clip

（1）border-box

图片没有从左边框开始
（2）padding-box

(3)content-box

从上面的6个效果图可以看出，background origin 的图片是从边框，内边距，内容开始的，背景颜色没有变化，而background clip 的图片显示在边框，内边距，内容中，背景颜色有变化，背景颜色分别从边框，内边距，内容开始，没有的地方空白

ps:注意看背景颜色的变化


												


											
css3-background clip 和background origin的更多相关文章
	

    
								
  1. CSS3详解：background
		
    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
    
		
    2. 
						
  2. css3整理--clip
		
    clip语法: .selector { clip: rect | auto | inherit } 注意:clip属性只能在元素设置了“position:absolute”或者“position:fi ...
    
		
    3. 
						
  3. css3中clip属性
		
    clip 属性用来设置元素的形状.用来剪裁绝对定位元素. 当一幅图像的尺寸大于包含它的元素时,"clip" 属性允许规定一个元素的可见尺寸,这样此元素就会被修剪并显示在这个元素中. ...
    
		
    4. 
						
  4. css3属性clip
		
    clip 属性定义了元素的哪一部分是可见的.clip 属性只适用于 position:absolute 的元素. rect(<top>, <right>, <bottom ...
    
		
    5. 
						
  5. compass模块
		
    Compass核心模块Reset :重置CSS模块 @import "compass/reset" Layout :页面布局的控制能力 @import "compass/ ...
    
		
    6. 
						
  6. css2和CSS3的background属性简写
		
    1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  backg ...
    
		
    7. 
						
  7. CSS3中background属性的调整
		
    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
    
		
    8. 
						
  8. css3 background
		
    background是一个很重要的css属性,在css3中新增了很多内容.一方面是原有属性新增了属性值,另一方面就是新增了3个属性. 一.css3中新增属性值介绍 css2的background有5个 ...
    
		
    9. 
						
  9. 第5章 css与背景相关的样式background
		
    background-origin 设置元素背景图片的原始起始位置. 语法: background-origin : border-box | padding-box | content-box; 参 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 如何选择EDM电子邮件服务提供商
			
    选择一家好的EDM电子邮件服务商非常重要,因为这可以让我们的EDM营销事半功倍,同时可以达到更好的营销效果.下面博主为大家介绍一下选择标准. 一.服务好不好. 这点很重要,当然这里的服务包括售前和售后 ...
    
			
    2. 
						
  2. ES6数值的拓展
			
    二进制和八进制表示法 ES6 提供了二进制和八进制数值的新的写法,分别用前缀0b(或0B)和0o(或0O)表示. 如果要将0b和0o前缀的字符串数值转为十进制,要使用Number方法 Number(' ...
    
			
    3. 
						
  3. OpenStack Nova Placement API 统一资源管理接口的未来
			
    目录 目录 Placement API 为何称之为 "未来" 操作对象基本概念 数据库操作样例 Placement API 在创建虚拟机时的调度过程 Placement REST  ...
    
			
    4. 
						
  4. SSLPinning简介，使用Xposed+JustTrustMe来突破SSL Pinning
			
    0x00 前面 如果你是一干Web安全的,当你在测试目前大多数的手机APP应用程序时,你一定遇到过burpsuite无法抓到数据包的情况,开始你以为只是https的问题,但是当你使用了burpsuit ...
    
			
    5. 
						
  5. 一次性计划任务at与周期性计划任务crontab
			
    一.at一次性计划任务使用 at语法格式: at 时间 at设置计划任务 1.下载at程序 [root@li ~]# yum install at -y 2.启动atd服务 [root@li ~]#  ...
    
			
    6. 
						
  6. java 多线程并发问题总结
			
    java 多线程并发主要通过关键字synchronized实现 Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 一.当两个并发线程访问 ...
    
			
    7. 
						
  7. 使用logstash收集java、nginx、系统等常见日志
			
    目录 1.使用codec的multiline插件收集java日志... 1 2.收集nginx日志... 2 3.收集系统syslog日志... 3 4.使用fliter的grok模块收集mysql日 ...
    
			
    8. 
						
  8. 洛谷 P5661 公交换乘 & [NOIP2019普及组] （模拟）
			
    传送门 解题思路 先把所有的数据读下来. 对于地铁,答案直接加,然后把编号放入一个数组a内. 对于公交车,从前往后枚举a数组,然后找到出现最早的且符合价钱大于等于公交车的价钱,然后把这个数删除(变为0 ...
    
			
    9. 
						
  9. [BZOJ4569] [Luogu 3295] [SCOI2016]萌萌哒(并查集+倍增)
			
    [BZOJ4569] [Luogu 3295] [SCOI2016]萌萌哒(并查集+倍增) 题面 有一个n位的十进制数a(无前导0),给出m条限制,每条限制\((l_1,r_1,l_2,r_2)(保证 ...
    
			
    10. 
						
  10. 【ES6】对象的新功能与解构赋值
			
    ES6 通过字面量语法扩展.新增方法.改进原型等多种方式加强对象的使用,并通过解构简化对象的数据提取过程. 一.字面量语法扩展 在 ES6 模式下使用字面量创建对象更加简洁,对于对象属性来说,属性初始 ...
    
			
    11.