background-origin与background-clip的“区别”
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的“区别”的更多相关文章
- css3-background clip 和background origin
1.background-origin background-origin 里面有3个参数 : border-box | padding-box | content-box; border-box,p ...
- compass模块
Compass核心模块Reset :重置CSS模块 @import "compass/reset" Layout :页面布局的控制能力 @import "compass/ ...
- 20190328-CSS样式一:字体样式font-、文本样式text-、背景图样式background-
目录 CSS参考手册:http://css.doyoe.com/ 1.字体简写:font:font-style || font-variant || font-weight || font-size ...
- CSS3详解:background
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
- css2和CSS3的background属性简写
1.css2:background:background-color || url("") || no-repeat || scroll || 0 0; css3: backg ...
- background属性的学习整理转述
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! background我们一般用到的的属性有: background-attachment:背景(图片)是否 ...
- CSS3中background属性的调整
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
- css 背景 background
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! background我们一般用到的的属性有: background-attachment:背景(图片)是否 ...
- 第一篇博客:HTML:background的使用
开篇 我是一名程序员小白,这是我写的第一篇博客,在学习的路上难免会遇到难以解决的问题,我将会在这里写下我遇到的问题并附上解决方法 希望可以对各位有所帮助!! 我们在html中经常会遇到这样的问题 例如 ...
- css background 背景知识详解
background 背景属性 我们知道元素有前景色color,与之对应的还有背景色,通过background我们可以为元素添加实色(background-color)和任意多个背景图片(backgr ...
随机推荐
- 通过定时任务 bash 脚本 控制 进程 的 执行时间
通过定时任务 bash 脚本 控制 进程 的 执行时间
- 在Qt Creator中为Qt工程添加资源
1.右键单击工程 -> Add New ... -> Qt -> Qt Resource File -> Choose... -> Name: -> Next -& ...
- amazon lightsail
https://51.ruyo.net/6038.html https://aws.amazon.com/cn/lightsail/
- Silverlight实用窍门系列:2.Silverlight动态加载外部XML指定地址的WebService---(动态加载外部XML文件中指定的WebService地址)【附带实例源码】
接上节所讲的,Silverlight可以加载外部的XML文件里面的内容,那么我们可不可以在外部XML里面配置一个WebService地址,并且以此加载这个地址来动态加载WebService呢?这样子就 ...
- 微信小程序wxml和wxss样式
对于css不熟悉的android程序员来说,开发微信小程序面临的一个比较困难的问题就是界面的排版了.微信小程序的排版就跟wxml和wxss有关了,它们两者相当于android的布局文件,其中wxml指 ...
- C++实现O(1)时间内删除链表结点
/* * 删除链表节点.cpp * * Created on: 2018年4月13日 * Author: soyo */ #include<iostream> using namespac ...
- LXC安装
#安装lxcsudo apt-get install lxc#创建一个容器,会出现下图选择的界面 lxc-create -t download -n my-container #开启lxc-start ...
- opencord视频截图
参考:https://www.youtube.com/watch?v=Teu9jK6GF6s
- 1、HTML的本质以及在web中的作用
一.HTML 1.一套规则,浏览器认识的规则. 2.开发者: 学习Html规则 开发后台程序: -写Html文件(充当模板的作用)****** -数据库获取数据,然后替换到html文件的指定位置(We ...
- emacs编辑c文件时,大括号的跳转(转载)
转自:http://forum.ubuntu.org.cn/viewtopic.php?f=68&t=26701 `C-M-n' Move forward over a parenthetic ...