css3新增了一些背景相关的属性,其中background-origin与background-clip是比较让人困惑的:

background-origin:用于指定绘制背景图片的起点。默认值:padding-box。
background-clip:用于指定背景图片的显示范围。默认值:border-box。

它们的都有这三个属性值:border-box padding-box content-box

那么区别在哪里呢?

先来看一个简单的小例子:

.box {
width: 199px;
height: 100px;
background-color: rgba(0,0,0,1);
border: 40px solid rgba(255,0,0,0.6);
padding: 40px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
}

发现了没有,此时的边框颜色有点偏暗,它受了黑色背景的影响。为什么背景颜色是从边框开始的呢,
这里就要提到background-clip属性,它的默认值就是border-box。

如果我们修改background-clip的值分别为padding-box与content-box:

相信上面的例子已经让你对clip有了了解,如果你用过photoshop的剪切蒙版,那么一定会觉得这个单词很形象~~~

background-image的情况类似:(默认background-repeat:repeat)


               (1)                                     (2)                                      (3)
但当background-repeat为no-repeat时,你发现第一张图的background是从左上角的padding开始,
一直到又下角的border。这可能在你意料之外。


             (4)                                    (5)                                       (6)

观察上面这6张图,你还发现了什么?对,它们背景图片的起始位置都是在左上角的padding。
这就是因为background-origin的默认值为padding-box的缘故了。下面我们就来看看这个属性。

这里都是默认了背景重复,至于不重复的情况,这里不再赘述。这9张图,很明显得告诉了我们background-origin的作用。它用来设置容器的背景图片从容器的哪里作为起始位置,至于显示不显示的问题,那就是background-clip的事了。

我们也可以控制背景图片不从0 0左上角开始显示,修改background-positon的位置即可。

如图:我们设置background-position:bottom right;

当设置background-position:center时,background-origin三个值的效果相同:


最后需要注意的一点是,当设置了background-attachment:fixed,background-origin无效。

现在,你应该已经发现,background-clip与background-origin其实是两个完全不同的属性。

background-origin与background-clip的“区别”的更多相关文章

  1. css3-background clip 和background origin

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

  2. compass模块

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

  3. 20190328-CSS样式一:字体样式font-、文本样式text-、背景图样式background-

    目录 CSS参考手册:http://css.doyoe.com/ 1.字体简写:font:font-style || font-variant || font-weight || font-size ...

  4. CSS3详解:background

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

  5. css2和CSS3的background属性简写

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

  6. background属性的学习整理转述

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! background我们一般用到的的属性有: background-attachment:背景(图片)是否 ...

  7. CSS3中background属性的调整

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

  8. css 背景 background

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! background我们一般用到的的属性有: background-attachment:背景(图片)是否 ...

  9. 第一篇博客:HTML:background的使用

    开篇 我是一名程序员小白,这是我写的第一篇博客,在学习的路上难免会遇到难以解决的问题,我将会在这里写下我遇到的问题并附上解决方法 希望可以对各位有所帮助!! 我们在html中经常会遇到这样的问题 例如 ...

  10. css background 背景知识详解

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

随机推荐

  1. UVA 10887 Concatenation of Languages 字符串hash

    题目链接:传送门 题意: 给你两个集合A,B,任意组合成新的集合C(去重) 问你最后C集合大小 题解: 暴力 组成的新串hash起来 #include<bits/stdc++.h> usi ...

  2. 解决pyspark-linux-windowsIDE JAVA_HOME not set

    对 os.environ 赋值 ssh://root@192.168.2.51:22/usr/bin/python -u /home/data/tmp_test/trunk/personas/tmp_ ...

  3. 详解likely和unlikely函数【转】

    本文转载自:http://blog.csdn.net/npy_lp/article/details/7175517 内核源码:Linux-2.6.38.8.tar.bz2 参考文档:http://gc ...

  4. hdu 1963 Investment 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1963 题目意思:有 本金 money,还有一些股票的种类,第 i 种股票买入需要 value[i] 这 ...

  5. hdu2544 迪杰斯特拉题目优化

    点击打开题目链接 迪杰斯特拉的用法不多讲,详见  点击打开链接 . 下面两个代码: 这个是用邻接矩阵存图的迪杰斯特拉. #include<stdio.h> int main() { int ...

  6. HDUoj4857逃生 拓扑排序

    逃生 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submiss ...

  7. [USACO2006 DEC] Wormholes

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1715 [算法] 用SPFA判定负环是否存在即可 时间复杂度 : O(N ^ 2) [ ...

  8. Vue之组件之间的数据传递

    Vue的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据,必须使用特定的方法才能实现组件之间的数据传递. 下列为在vue-cli创建项目中的操作 一·父组件向子组件传递数据 在Vue中 ...

  9. lnmp-详细编译安装步骤

    CentOS 7.0编译安装Nginx1.6.0+MySQL5.6.19+PHP5.5.14 一.配置防火墙,开启80端口.3306端口 CentOS 7.0默认使用的是firewall作为防火墙,这 ...

  10. UI:地图和定位

    参考学习链接 各种IOS设备可以使用 Core Location 框架确定它的物理位置.core location 主要使用三种技术来实现功能.GPS.蜂窝基站三角网络定位. wifi 定位服务.这三 ...