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. Hook基本知识
			
    一.什么是HOOK(钩子) Windows系统,建立在事件驱动机制上,就是整个系统都是通过消息传递实现的.hook(钩子)是一种特殊的消息处理机制,它可以监视系统或者进程中的各种事件消息,截获发往目标 ...
    
			
    2. 
						
  2. 服务器端-W3Chool：服务器脚本教程
			
    ylbtech-服务器端-W3Chool:服务器脚本教程 1.返回顶部 1. 服务器脚本教程 从左侧的菜单选择你需要的教程! SQL SQL 是用于访问和处理数据库的标准的计算机语言. 在本教程中,您 ...
    
			
    3. 
						
  3. Python基本语法_基本数据类型_数值型详解
			
    目录 目录 软件环境 Python变量调用的过程 数值型 删除一个数值类型对象 布尔型 Bool 标准整型 Int 长整型 双精度浮点型 Float 复数 数值类型对象的内建功能函数 absNumbe ...
    
			
    4. 
						
  4. Scratch少儿编程系列：（九）音乐高级技巧
			
    一.程序说明 本程序用来演奏音乐,相对于“Scratch少儿编程系列:(八)演奏简单音乐”而言,本节介绍的方法适用于复杂点的音乐. 二.程序流程图 为了更直观的描述上述过程,采用流程图的方式将猜数字的 ...
    
			
    5. 
						
  5. iScroll使用参考
			
    分享是传播.学习知识最好的方法 以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍清楚了.如果你英文比较好的话,可以看看官网的资料 ...
    
			
    6. 
						
  6. MySql-Mysql技术内幕~SQL编程学习笔记（N）
			
    1._rowid 类似Oracle的rowid mysql> ; +-------+----+----------------+-------------+---------------+--- ...
    
			
    7. 
						
  7. ENGINE=InnoDB AUTO_INCREMENT=22 DEFAULT CHARSET=utf8;
			
    参考来源:https://blog.csdn.net/yuxinha11/article/details/80090197 ENGINE=InnoDB不是默认就是这个引擎吗?——是的,如果不写也是ok ...
    
			
    8. 
						
  8. [LeetCode] 212. 单词搜索 II
			
    题目链接:https://leetcode-cn.com/problems/word-search-ii/ 题目描述: 给定一个二维网格 board 和一个字典中的单词列表 words,找出所有同时在 ...
    
			
    9. 
						
  9. PythonDay07
			
    第七章 今日内容 基础数据类型补充 以后会遇到的坑 二次编码 基础类型补充 stra = "One two"print(a.capitalize())   # 首字母大写print ...
    
			
    10. 
						
  10. 【NOI2007】项链工厂   ——老题新做.jpg
			
    第一次是用 ODT 过的...(虽说跑得飞慢但它就是能过) 而且还写了发题解... 第二次是在考场上碰到了这道题,然后居然打了线段树,各种 bug 直接让代码爆零 但还是补好了代码重新交了一发,发现跑 ...
    
			
    11.