CSS background-origin属性
来源:互联网 发布:3000左右手表推荐知乎 编辑:程序博客网 时间:2024/05/22 13:50
我在讲解background-position
属性时引出了背景图片坐标系的应用。当时说背景图片是相对于坐标原点定位的,而这个坐标原点就位于border-box区域的左上起点,其实这是不严谨的。因为那是默认情况下,而这里要讲解的background-origin
属性就是控制这个坐标原点的位置的。
Origin有“起源”的意思,而background-origin
就有“背景图片起点”的意思。它是告诉浏览器background-position
是相对于哪里定位的。有人会想到background-repeat
属性,当这个属性设置为非no-repeat
时,这时背景图片就像是孙猴子的猴毛一样的多,那到底是哪个背景图片呢。这时你就需要用你的火眼金睛了。我们把设置background-repeat: no-repeat;
时显示的背景图片称为元背景图片,这是它的真身,我们的background-position
属性控制的就是这个真身的位置。
图片来源于
http://www.zhangxinxu.com/wordpress/2011/05/%E7%BF%BB%E8%AF%91-css3-backgrounds%E7%9B%B8%E5%85%B3%E4%BB%8B%E7%BB%8D/
background-origin
的值有:
border-box
padding-box(默认值)
content-box
关于这三个值的解释,我得引出盒模型这个概念
盒模型
在CSS中,元素被看成一盒子。这个盒子被分解成三个部分,即border-box部分、padding-box部分和content-box部分。
在这个互联网电商时代,相信大家都在网上买过商品吧。当我们欣然的接过快递小哥送来的包裹时,就会迫不及待的打开包裹,首先我们会打开包装,这个包装就是border-box区域。如果我们买的东西是易碎品,那么我们会看到包裹内的防压泡沫板,这个就是padding-box区域,而在最里边的我们的心爱之物就是content-box区域。
在CSS中,border-box区域的大小是由border
属性控制的,padding-box区域的大小是由padding
属性控制的,content-box区域的大小是由实际内容区域大小控制的。
回到background-origin
这个属性上来,它的三个值就好理解了。在CSS中页面的渲染性格是由页面左上角开始的,那么
border-box
就是把背景图片的坐标原点设置在盒模型border-box区域的左上角padding-box
就是把背景图片的坐标原点设置在盒模型padding-box区域的左上角content-box
就是把背景图片的坐标原点设置在盒模型content-box区域的左上角
使用案例:
background-origin: border-box; background-origin: padding-box; background-origin: content-box;
注:南来北往的看官,这里要注意一下,当background-attachment
属性设置为fixed
时,background-origin
属性会失效。
这下终于理解了background-origin
属性,豁然开朗,好了,可以去睡个好觉了。
原文链接
- CSS background-origin属性
- CSS之background-origin属性
- css中的background的几个属性(background-attachment/background-origin,background-clip等)
- CSS Background-origin
- background-origin 属性
- background-origin属性使用示例
- CSS: background-clip与background-origin
- 背景 属性background-origin与background-clip
- css3新增背景属性background-clip/background-origin/background-size
- [CSS]CSS background属性
- css3:背景属性background-origin/clip详解
- CSS学习(八)-background-origin、background-clip
- HTML/CSS: background-clip 与 background-origin的区别
- Background-clip background-origin 两个属性的水还挺深
- CSS background-position 属性
- css背景属性 Background
- css 属性 background:transparent;
- css的background属性
- 【概率论】客观概率论 私人回顾
- 交叉编译
- 【opencv学习之二十】图像基本运算
- (dfs+离散)格尼斯堡的“七桥问题”
- 1982: D.房间安排
- CSS background-origin属性
- JAVA基础-类3-类的构造方法
- 洛谷 [模板]快速排序
- Spring-boot参考(二)
- 欢迎使用CSDN-markdown编辑器
- JVM的内存区域划分
- Unity UGUI图文混排源码--优化版
- [DesignPattern]结束也是开始
- 程序_通过汇编了解程序的实际构成