CSS3之背景定位原点background-origin
背景定位原点background-origin是CSS3新添加的有关背景的属性,主要是改变背景起始的原点位置的。CSS3之背景定位原点background-origin的属性值有三个:border、padding和content。下面将围绕着三个属性值为大家介绍CSS3之背景定位原点background-origin。
一、background-origin的语法
1、background-origin的语法
2、background-origin的属性值
(1)padding-box:此值为background-origin的默认值,决定background-position起始位置。从padding的外边缘(border的内边缘)开始显示背景图片;
(2)border-box:此值决定background-position起始位置从border的外边缘开始显示背景图片;
(3)content-box:此值决定background-position起始位置从content的外边缘(padding的内边缘)开始显示背景图片;
二、background-origin的兼容
1、background-origin的兼容情况
2、background-origin的兼容写法
- -moz-background-origin: padding-box || border-box || content-box;
- /*Webkit*/
- -webkit-background-origin: padding-box || border-box || content-box;
- /*Presto*/
- -o-background-origin: padding-box || border-box || content-box;
- /*W3c标准*/
- background-origin: padding-box || border-box || content-box;
三、background-origin的实例(在谷歌浏览器预览效果哟)
1、padding-box效果
CSS代码:
- -webkit-background-origin: padding-box;
- /*这是默认的位置*/
- }
HTML代码:
预览效果:
2、border-box效果
CSS代码:
- -webkit-background-origin: border-box;
- }
HTML代码:
预览效果:
3、content-box效果
CSS代码:
- div {width:200px;height:200px;background:url("http://www.leemagnum.com/img/logo.jpg") no-repeat;border:20px solid rgba(0,0,0,0.3);padding:20px;
- -webkit-background-origin: content-box;
- }
HTML代码:
- <div></div>
预览效果:
CSS3之背景定位原点background-origin就为大家介绍到这里了,希望能对大家有所帮助。更多有关CSS3的内容敬请关注梦龙小站有关CSS3的更新,感谢大家长期以来对梦龙小站的支持。
CSS3之背景定位原点background-origin的更多相关文章
- css3之背景定位
属性: background-position: left top || left bottom || right top || right bottom || center center || 像素 ...
- CSS3的背景background
CSS3中的Background属性 background: background-image || background-position/background-size || background ...
- CSS3总结二:(background)背景/渐变色函数
background-color(CSS2) background-image background-position background-size background-repeat backgr ...
- [css 揭秘]:CSS揭秘 技巧(三):背景定位
我的github地址:https://github.com/FannieGirl/ifannie 源码都在这上面哦! 喜欢的给我一个星吧 背景定位 问题:很多时候,我们想针对容器某个角对背景图片做便宜 ...
- 20190328-CSS样式一:字体样式font-、文本样式text-、背景图样式background-
目录 CSS参考手册:http://css.doyoe.com/ 1.字体简写:font:font-style || font-variant || font-weight || font-size ...
- css3-background clip 和background origin
1.background-origin background-origin 里面有3个参数 : border-box | padding-box | content-box; border-box,p ...
- css3 Gradient背景
css3的gradient分为两种:线性渐变(linear)和径向渐变(radial). 一.线性渐变linear-gradient 1.介绍 linear-gradient([设置方向],[设置开始 ...
- CSS3之背景剪裁Background-clip
CSS3之背景剪裁Background-clip是CSS3中新添加的内容.这个属性还是比较简单的,主要分五个属性值:border.padding.content.no-clip和text.下面将针对这 ...
- [css]《css揭秘》学习(三)-灵活的背景定位
一.background-position属性 使用该属性,在不确定容器大小的情况下,也可以指定图案距离容器边缘的位置:但是需要为不支持该属性的浏览器指定回退方案,否则,图案会默认放在左上角. < ...
随机推荐
- [Java多线程]-Thread和Runable源码解析之基本方法的运用实例
前面的文章:多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类) 多线程爬坑之路-Thread和Runable源码解析 前面 ...
- [机器学习]-Adaboost提升算法从原理到实践
1.基本思想: 综合某些专家的判断,往往要比一个专家单独的判断要好.在”强可学习”和”弱可学习”的概念上来说就是我们通过对多个弱可学习的算法进行”组合提升或者说是强化”得到一个性能赶超强可学习算法的算 ...
- [DeeplearningAI笔记]序列模型2.3-2.5余弦相似度/嵌入矩阵/学习词嵌入
5.2自然语言处理 觉得有用的话,欢迎一起讨论相互学习~Follow Me 2.3词嵌入的特性 properties of word embedding Mikolov T, Yih W T, Zwe ...
- Windows 安装 RabbitMQ
RabbitMQ概述 RabbitMQ是流行的开源消息队列系统,是AMQP(Advanced Message Queuing Protocol高级消息队列协议)的标准实现,用erlang语言开发.Ra ...
- PHP扩展--taint检测隐藏漏洞
简介 Taint 可以用来检测隐藏的XSS code, SQL注入, Shell注入等漏洞, 并且这些漏洞如果要用静态分析工具去排查, 将会非常困难, 比如对于如下的例子: <?php echo ...
- 重构改善既有代码设计--重构手法06:Split Temporary Variable (分解临时变量)
你的程序有某个临时变量被赋值超过一次,它既不是循环变量,也不被用于收集计算结果.针对每次赋值,创造一个独立.对应的临时变量 double temp = 2 * (_height + _width); ...
- [php]手动搭建php开发环境(排错)
前提:针对自己的系统下载相应的php.apache.mysql,安装完毕后按照以下去配置httpd.conf和php.ini 本人用的是php5.6.4和apache2.4.4 一.Apache : ...
- 2008 Round 1A C Numbers (矩阵快速幂)
题目描述: 请输出(3+√5)^n整数部分最后3位.如果结果不超过2位,请补足前导0. 分析: 我们最容易想到的方法肯定是直接计算这个表达式的值,但是这样的精度是不够的.朴素的算法没有办法得到答案.但 ...
- java校验身份证号码
/** * 18位身份证校验,粗略的校验 * @author lyl * @param idCard * @return */ public static boolean is18ByteIdCard ...
- idea 控制台乱码
第一步:修改intellij idea配置文件: 找到intellij idea安装目录,bin文件夹下面idea64.exe.vmoptions和idea.exe.vmoptions这两个文件,分别 ...