在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. linux 网络编程-基础篇01

    #Socket简介 是一个编程接口是一种特殊的文件描述符(everything in Unix is a file)并不仅限于TCPIP协议面向连接(Transmission Control Prot ...

  2. Linux ALSA声卡驱动之七:ASoC架构中的Codec

    1.  Codec简介(ad/da) 在移动设备中,Codec的作用可以归结为4种,分别是: 对PCM等信号进行D/A转换,把数字的音频信号转换为模拟信号 对Mic.Linein或者其他输入源的模拟信 ...

  3. 一些SQL高级函数

    一些SQL高级函数 Posted on 2010-08-08 21:34 moss_tan_jun 阅读(311) 评论(0) 编辑 收藏 长度与分析用 datalength(Char_expr) 返 ...

  4. 【Codevs3567】宫廷守卫

    Position: http://codevs.cn/problem/3567/ Description 从前有一个王国,这个王国的城堡是一个矩形,被分为M×N个方格.一些方格是墙,而另一些是空地.这 ...

  5. [ZJOI 2009] 假期的宿舍

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1433 [算法] 二分图匹配[代码] #include<bits/stdc++. ...

  6. codeforces——贪心

    codeforces 804A Find Amir   http://codeforces.com/problemset/problem/804/A /* 题意:给定n个学校,需要遍历所有学校,可从任 ...

  7. P4407 [JSOI2009]电子字典

    传送门 我的哈希打挂了--然而大佬似乎用哈希可以过还跑得很快-- 删除,枚举删哪个字符,记删之后的哈希值存map 插入,相当于在单词里删字符,去对应的map里查找 更改,相当于两个都删掉同一个位置的字 ...

  8. 实战篇之实现 OutLook 中以 EDM 形式发送通知邮件

    1.写 Html5 的 EDM 模板 EDM 源代码示例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...

  9. BZOJ 3514 LCT+主席树

    思路: //By SiriusRen #include <bits/stdc++.h> using namespace std; ; ],fa[N],minn[N],rev[N],q[N] ...

  10. what is success?

    什么是成功?这是个老话题了.然而每个人对成功的认识却也不同.记得央视主持人王志说过成功是相对的,每个人都有自己的成功标准.有的人认为有钱.有房.有车.有女人,就是成功.有的人则认为成功是你做了一件你想 ...