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 ...
随机推荐
- UVA 10887 Concatenation of Languages 字符串hash
题目链接:传送门 题意: 给你两个集合A,B,任意组合成新的集合C(去重) 问你最后C集合大小 题解: 暴力 组成的新串hash起来 #include<bits/stdc++.h> usi ...
- 解决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_ ...
- 详解likely和unlikely函数【转】
本文转载自:http://blog.csdn.net/npy_lp/article/details/7175517 内核源码:Linux-2.6.38.8.tar.bz2 参考文档:http://gc ...
- hdu 1963 Investment 解题报告
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1963 题目意思:有 本金 money,还有一些股票的种类,第 i 种股票买入需要 value[i] 这 ...
- hdu2544 迪杰斯特拉题目优化
点击打开题目链接 迪杰斯特拉的用法不多讲,详见 点击打开链接 . 下面两个代码: 这个是用邻接矩阵存图的迪杰斯特拉. #include<stdio.h> int main() { int ...
- HDUoj4857逃生 拓扑排序
逃生 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submiss ...
- [USACO2006 DEC] Wormholes
[题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1715 [算法] 用SPFA判定负环是否存在即可 时间复杂度 : O(N ^ 2) [ ...
- Vue之组件之间的数据传递
Vue的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据,必须使用特定的方法才能实现组件之间的数据传递. 下列为在vue-cli创建项目中的操作 一·父组件向子组件传递数据 在Vue中 ...
- lnmp-详细编译安装步骤
CentOS 7.0编译安装Nginx1.6.0+MySQL5.6.19+PHP5.5.14 一.配置防火墙,开启80端口.3306端口 CentOS 7.0默认使用的是firewall作为防火墙,这 ...
- UI:地图和定位
参考学习链接 各种IOS设备可以使用 Core Location 框架确定它的物理位置.core location 主要使用三种技术来实现功能.GPS.蜂窝基站三角网络定位. wifi 定位服务.这三 ...