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. 通过定时任务 bash 脚本 控制 进程 的 执行时间

    通过定时任务 bash 脚本 控制 进程 的 执行时间

  2. 在Qt Creator中为Qt工程添加资源

    1.右键单击工程 -> Add New ... -> Qt -> Qt Resource File -> Choose... -> Name: -> Next -& ...

  3. amazon lightsail

    https://51.ruyo.net/6038.html https://aws.amazon.com/cn/lightsail/

  4. Silverlight实用窍门系列:2.Silverlight动态加载外部XML指定地址的WebService---(动态加载外部XML文件中指定的WebService地址)【附带实例源码】

    接上节所讲的,Silverlight可以加载外部的XML文件里面的内容,那么我们可不可以在外部XML里面配置一个WebService地址,并且以此加载这个地址来动态加载WebService呢?这样子就 ...

  5. 微信小程序wxml和wxss样式

    对于css不熟悉的android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指 ...

  6. C++实现O(1)时间内删除链表结点

    /* * 删除链表节点.cpp * * Created on: 2018年4月13日 * Author: soyo */ #include<iostream> using namespac ...

  7. LXC安装

    #安装lxcsudo apt-get install lxc#创建一个容器,会出现下图选择的界面 lxc-create -t download -n my-container #开启lxc-start ...

  8. opencord视频截图

    参考:https://www.youtube.com/watch?v=Teu9jK6GF6s

  9. 1、HTML的本质以及在web中的作用

    一.HTML 1.一套规则,浏览器认识的规则. 2.开发者: 学习Html规则 开发后台程序: -写Html文件(充当模板的作用)****** -数据库获取数据,然后替换到html文件的指定位置(We ...

  10. emacs编辑c文件时,大括号的跳转(转载)

    转自:http://forum.ubuntu.org.cn/viewtopic.php?f=68&t=26701 `C-M-n' Move forward over a parenthetic ...