在css3中，background-clip和background-origin它们2个的功能大致相同，但又有些细微差别。

　　1.background-clip：规定背景的绘制区域，当背景是纯颜色时与图片时，它的显示方式又不一样。它有3种属性：border-box、padding-box、content-box.

　　border-box：背景是从边框开始绘制，但当背景是图片时，它是左边和上边是没有绘制图片，但下边和右边有；

代码：

 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4 <meta charset="utf-8">

 5 <style>

 6 div

 7 {

 8  　 width:300px;

 9 　　height:300px;

10 　　padding:50px;

11 　　background-color: red;

12 　　background-image:url('/8.jpg');

13 　　background-repeat:no-repeat;

14 　　/*-webkit-background-origin:content-box;*/

15 　　-webkit-background-clip:border-box;

16 　　/*-webkit-background-clip:padding-box;*/

17 　　border:10px dashed  #92b901;

18 }

19 </style>

20 </head>

21 <body>

22

23 <div>

24 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

25 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

26 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

27 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

28 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

29 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

30 </div>

这是结果：

　　padding-box：背景在边框内部绘制（不包括边框）；

　　content-box：背景从内容部分绘制；具体例子看这个地址：http://www.w3school.com.cn/tiy/c.asp?f=css_background-clip

　　2.background-origin:规定背景图片的定位区域，它的属性也有border-box、padding-box、content-box 这3种属性，但要注意他的描述是“背景图片”，也就是说它只能对背景做样式上的操作，它相当于positon,规定了图片开始绘制的的区域，也就是它只相当于规定图片的左上角从什么地方开始，其他的它就不负责了；

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<style>

div

{

width:300px;

height:300px;

padding:50px;

background-color: red;

background-image:url('/8.jpg');

background-repeat:no-repeat;

-webkit-background-origin:content-box;

background-size: 380px 380px;

border:10px dashed  #92b901;

}

</style>

</head>

<body>

<div>

这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。

</div>

</body>

</html>

下面是结果：

background-origin:绘制图片时，是可以从边框开始的，但有可能会被边框覆盖掉一些内容，如上面的第二幅图片

转载自http://www.cnblogs.com/itwlg/p/4425339.html

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

  1. css3-background clip 和background origin

    1.background-origin background-origin 里面有3个参数 : border-box | padding-box | content-box; border-box,p ...

  2. CSS3详解：background

    CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...

  3. CSS3 filter:drop-shadow滤镜与box-shadow区别应用 抄的

    CSS3 filter:drop-shadow滤镜与box-shadow区别应用 这篇文章发布于 2016年05月18日,星期三,01:07,归类于 css相关. 阅读 5777 次, 今日 12 次 ...

  4. background和background-image一点小区别

    如果使用background-image属性,则no-repeat不能使用,因为其对background-image不起作用. 可以使用background属性,再设置no-repeat.

  5. 深入理解css3中nth-child和 nth-of-type的区别

    在css3中有两个新的选择器可以选择父元素下对应的子元素,一个是:nth-child 另一个是:nth-of-type. 但是它们到底有什么区别呢? 其实区别很简单::nth-of-type为什么要叫 ...

  6. 深入理解css3中 nth-child 和 nth-of-type 的区别

    在css3中有两个新的选择器可以选择父元素下对应的子元素,一个是:nth-child 另一个是:nth-of-type. 但是它们到底有什么区别呢? 其实区别很简单::nth-of-type为什么要叫 ...

  7. 【CSS3】background-origin和background-clip的区别

    background-clip 与 background-origin是css3中引入的两个跟元素背景相关的属性,它们有相同的可选值,即border.padding.content三种,而且这两个属性 ...

  8. CSS3中:nth-child和:nth-of-type的区别深入理解。 关于:nth-child和:nth-of-type的区别之前一直没太注意，经深入理解才发现里面其实暗藏玄机

    关于:nth-child和:nth-of-type的区别之前一直没太注意.最近打算深入了解一些CSS3,才发现里面其实暗藏玄机. :nth-child可以选择父元素下的字元素,:nth-of-type ...

  9. CSS3中:nth-child和:nth-of-type的区别深入理解

    关于:nth-child和:nth-of-type的区别之前一直没太注意.最近打算深入了解一些CSS3,才发现里面其实暗藏玄机. :nth-child可以选择父元素下的字元素,:nth-of-type ...

  10. 【CSS3】透明度opacity与rgba()区别、光标cursor、display、轮廓outline与margin及border区别、em和rem区别

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. Android:仿手机QQ好友动态的ListView

    1.介绍: 本博客使用XListView模仿Android版QQ好友动态的ListView效果.效果截图例如以下: 效果图1 watermark/2/text/aHR0cDovL2Jsb2cuY3Nk ...

  2. JpGraph中文乱码问题解决

    JpGraph是一个PHP的图形类库,可以方便地生成各种柱状图,饼图,折线图等等,而且还可以方便地加文字.但是,中文的情况就稍微麻烦了一点.在JpGraph中默认是要把字符串转成utf8的,但是如果你 ...

  3. mac 配置hadoop 2.6(单机和伪分布式)

    一.准备工作: 安装jdk >= 1.7: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133 ...

  4. poj3254Corn Fields

    Corn Fields Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 13765   Accepted: 7232 Desc ...

  5. 布局技巧1：创建可重用的UI组件（include标签）

    Android平台提供了大量的UI构件,你可以将这些小的视觉块(构件)搭建在一起,呈现给用户复杂且有用的画面.然而,应用程序有时需要一些高级的视觉组件.为了满足这一需求,并且能高效的实现,你可以把多个 ...

  6. 简单动态规划——最长公共子序列&&最长回文子序列&&最长上升||下降子序列

    最长公共子序列,顾名思义当然是求两个字符串的最长公共子序列啦,当然,这只是一道非常菜的动规,所以直接附上代码: #include<iostream> #include<cstdio& ...

  7. bzoj3629 [JLOI2014]聪明的燕姿——DFS+约数和定理

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3629 扫除了一个知识盲点:约数和定理 约数和定理: 对于一个大于1正整数n可以分解质因数:n ...

  8. $(document).ready 与 window.onload的区别？

    $(document).ready  = function(){}; DOM树加载完成时执行,此时文件不一定都已加载完成. window.onload = function(){}; DOM树加载完成 ...

  9. Is the Information Reliable?(差分约束系统)

    http://poj.org/problem?id=2983 题意:给出M条信息,判断这些信息的正确性.(1)V A B :表示A,B之间的距离>=1; (2)P A B X :表示A B之间的 ...

  10. [Swift通天遁地]二、表格表单-(8)快速实现表单的输入验证

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...