background-origin:指定绘制背景图片的起点。

background-clip：是对背景图片的剪裁，指定背景图片的显示范围。

1、background-origin:padding  || border || content(旧版本);padding-box || border-box || content-box (新版本);

　　eg:padding,则从padding外边缘开始定位；同理，其他也是从外边缘起始定位；

2、background-clip:padding  || border || content(旧版本);padding-box || border-box || content-box (新版本);

　　eg:padding,则从padding外边缘开始向外裁剪，只显示padding(包括padding)之内的图片；

　

background-clip 默认类似于 background-clip:border。
background-origin 默认类似于 background-origin:padding。

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. arcgis raster clip and mask difference 栅格 提取 clip 和 mask 方法的区别

    建议使用 数据管理工具下的此工具进行操作: 在选择参数时,注意做如下选择,可以保证栅格不会轻微错开: 也就是勾选第一个,而不勾选第二个 看看效果,使用mask得到的裁剪结果,注意有错开现象: 使用cl ...

  3. git merge origin master git merge origin/master区别

    git merge origin master //将origin merge 到 master 上 git merge origin/master //将origin上的master分支 merge ...

  4. compass模块

    Compass核心模块Reset :重置CSS模块 @import "compass/reset" Layout :页面布局的控制能力 @import "compass/ ...

  5. CSS3详解：background

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

  6. css2和CSS3的background属性简写

    1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  backg ...

  7. CSS3中background属性的调整

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

  8. 第5章 css与背景相关的样式background

    background-origin 设置元素背景图片的原始起始位置. 语法: background-origin : border-box | padding-box | content-box; 参 ...

  9. css background 背景知识详解

    background 背景属性 我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...

  10. Android background tint颜色渲染

    该篇文章主要是讲Android颜色渲染,首先先来看看PorterDuff,对绘图非常重要. PorterDuff的由来: 相信大多数人看到这个ProterDuff单词很奇怪了吧,这肿么个意思呢,然后就 ...

随机推荐

  1. 纯CSS制作图形效果

    下面所有的例子都是在demo.html的基础上添加相关样式实现的. <!DOCTYPE html> <html> <head> <meta charset=& ...

  2. [转][C#]Linq 的扩展方法

    public static class LinqEx { public static IEnumerable<TResult> LeftExcludingJoin<TSource, ...

  3. note 4 三大结构

    程序流程图 顺序结构 选择结构 if if-else if 语句-嵌套结构(Nested) 多分支结构(Chained) if score >= 90: print 'ARM' elif sco ...

  4. websocket简单理解

    实现及原理 Websocket是一种在单个TCP连接上进行全双工通讯的协议. WebSocket 首先发起一个 HTTP 请求,在请求头加上 `Upgrade` 字段,该字段用于改变 HTTP 协议版 ...

  5. Android Studio 加载网络图片

    Android Studio是基于gradle的一个Android开发软件,在引用网络图片的时候需要连接第三方库,这里介绍 引用glide的方法. 一.在github页面搜索glide,点击第一个 二 ...

  6. 【Linux命令】Linux下的tar压缩解压缩命令详解（转）

    tar -c: 建立压缩档案 -x:解压 -t:查看内容 -r:向压缩归档文件末尾追加文件 -u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能用其中一个 ...

  7. java Integer类以及拆箱和装箱

    package com.ilaw.boson.controller; public class Demo { public static void main(String[] args) { Inte ...

  8. error: ‘kEmptyString’ is not a member of ‘google::protobuf::internal’

    最近安装caffe,突然报这个错: .build_release/src/caffe/proto/caffe.pb.h: In member function ‘void caffe::ImageDa ...

  9. js 模拟css3 动画2

    <html> <head> <title> javaScript缓动入门 </title> </head> <body> < ...

  10. Matplotlib--基本使用

    基础应用 import matplotlib.pyplot as plt import numpy as np #使用np.linspace定义x:范围是(-1,1);个数是50. 仿真一维数据组(x ...