先不说background-clip/background-origin的用法，我们先来聊聊css背景方面的知识。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>css背景知识点</title>

     <style>

         body,p{

             margin:0;

             padding:0;

         }

         p{

             width:100px;

             height:100px;

             background-color:pink;

         }

     </style>

 </head>

 <body>

     <p></p>

 </body>

 </html>

现在p的宽和高各是100px，颜色的范围也是100*100的对吧，如果给它加上padding-top：10px呢？那么现在的高是110，颜色的背景是100*110对不？

因为背景是包括padding的，这对理解为什么需要使用background-clip和background-origin至关重要。

透露一下，大部分情况会使用在有用精灵图的背景上。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>css背景知识点</title>

     <style>

         body,p{

             margin:0;

             padding:0;

         }

         .box{

             width:100%;

             height:45px;

             line-height:45px;

             background-color:#ccc;

         }

         p{

             width:42px;

             height:40px;

             margin:0 auto;

             background-size:50px 50px;

             background:url("focus-icon.png") no-repeat 0 -50px;

         }

     </style>

 </head>

 <body>

     <div class="box">

         <p></p>

     </div>

 </body>

 </html>

效果图

我现在想让中间的爱心Y方向向下移动一点，我给p标签加上padding-top:10px;

效果如下

它并没有向下移动而是高度多出了一些，如果你理解了我上面说的，那你应该可以理解这个。

之所以会这样是因为背景包括了padding。但是我们现在并不想这样，那就可以用css3的属性background-clip，这是一个裁剪属性

加上background-clip:content-box;就可以了，什么意思呢？就是说从内容开始计算背景，那么就不会包括padding了。

应该懂了吧？

那么background-origin什么意思呢？

不知道你们有没有方向一个现象，就是我们使用精灵图的时候默认图片会显示在左上角。

如果你想改变它的位置就可以使用background-oringin

如果想从中间开始，那就设置成background-oringin:content-box;

当然还有其他的一些属性，你们可以去网上查一下。

css3,background-clip/background-origin的使用场景，通俗讲解的更多相关文章

  1. CSS3的背景background

    CSS3中的Background属性 background: background-image || background-position/background-size || background ...

  2. 理解CSS3中的background－size(对响应性图片等比例缩放)

    理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...

  3. CSS3实战之background篇

    在CSS3中,background可以添加多个背景图像组,背景图像之间通过逗号进行分隔. 每个背景图像层都可以包含下面的值 background-image 定义背景图像 background-col ...

  4. CSS3 & gradient & color & background

    CSS3 & gradient & color & background css background https://developer.mozilla.org/en-US/ ...

  5. 从原理到场景 系统讲解 PHP 缓存技术

    第1章课程介绍 此为PHP相关缓存技术的课堂,有哪些主流的缓存技术可以被使用? 第1章 课程介绍 1-1课程介绍1-2布置缓存的目的1-3合理使用缓存1-4哪些环节适合用缓存 第2章 文件类缓存 2- ...

  6. css3新增属性-background背景

    css3新增属性 边框属性 背景属性 文字属性 颜色属性 背景属性 属性 说明 background-image 添加背景图片 background-size 指定背景图像的大小 background ...

  7. CSS3中的background－size(对响应性图片等比例缩放)

    background-size的基本属性 background-size: 可以设定背景图像的尺寸,该属性是css3中的,在移动端使用的地方很多,比如最常见的地方在做响应性布局的时候,比如之前做的项目 ...

  8. css3新增的background属性

    1.background-size 可取值:auto(背景图片正常显示) size size (150px 40%) cover (背景图片覆盖整个背景) contain(背景图片缩小填满整个背景) ...

  9. html5+css3中的background: -moz-linear-gradient 用法

    在CSS中background: -moz-linear-gradient 让网站背景渐变的属性,目前火狐3.6以上版本和google浏览器支持这个属性. background: -moz-linea ...

  10. html5+css3中的background: -moz-linear-gradient 用法 (转载)

    转载至-->http://www.cnblogs.com/smile-ls/archive/2013/06/03/3115599.html 在CSS中background: -moz-linea ...

随机推荐

  1. iOS开发----三目运算符

    一.三目运算符 1.基本格式 : (关系表达式) ? 表达式1 : 表达式2;  执行流程 : 关系表达式为 真 返回表达式1 关系表达式为假 返回表达式2 2.写一个例子来看一下三目运算符的使用: ...

  2. Leetcode 203 Remove Linked List Elements 链表

    去掉链表中相应的元素值 /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next ...

  3. CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)

    刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现.所以请大家明白,特别是We ...

  4. 微软BI 之SSIS 系列 - 利用 SSIS 模板快速开发 SSIS Package

    开篇介绍 在做 ETL 项目的时候,往往很多 Package 的开发都是基于相同的模型和流程.比如在 Package 开始运行时需要向 Process Log 表中插入记录,在 Package 运行结 ...

  5. 騰訊RTX的API開發,給RTX開個天窗

    好多人可能沒聽說RTX這個軟件,在此我簡單說明一下,這個軟件是騰訊為企業開發的一個內部聊天軟件,服務端不是在騰訊那邊,而是需要企業自己安裝到自己公司內部的服務器上,以供企業內部員工交流使用,功能和QQ ...

  6. Cracking Story - How I Cracked Over 122 Million SHA1 and MD5 Hashed Passwords

    This is the story about how I cracked 122 million* password hashes with John the Ripper and oclHashc ...

  7. Python多线程编程之多线程加锁

    Python语言本身是支持多线程的,不像PHP语言. 下面的例子是多个线程做同一批任务,任务总是有task_num个,每次线程做一个任务(print),做完后继续取任务,直到所有任务完成为止. #co ...

  8. 使用tcpcopy拷贝线上流量压测测试环境

    tcpcopy项目地址:https://github.com/session-replay-tools/tcpcopy 作者地址:http://blog.csdn.net/wangbin579 1:环 ...

  9. 连接UI到代码

    本章,你将连接FoodTracker应用程序的UI到代码并定义一些可执行的动作.当你完成时,你的应用程序将是这个样子: 学习目标在课程结束时,你将能够:1.解释一个storyboard中的场景和vie ...

  10. SqlServer数据库备份与还原

    http://v.youku.com/v_show/id_XMjA4NzcyNzUy.html http://v.youku.com/v_show/id_XMjA4Nzc0NDQw.html