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属性 使用该属性,在不确定容器大小的情况下,也可以指定图案距离容器边缘的位置:但是需要为不支持该属性的浏览器指定回退方案,否则,图案会默认放在左上角. < ...
随机推荐
- Jenkins基于角色的项目权限管理
参考博客:http://www.cnblogs.com/davidwang456/p/3701972.html 一.简介 由于jenkins默认的权限管理体系不支持用户组或角色的配置,因此需要安装第三 ...
- 前端PHP入门-004-数据类型,特别需要注意字符串
人类世界对万事万物都有种类划分,例如: 哺乳动物 人.猫.马.鸭嘴兽-.等等 蔬菜 西红柿.波菜.茄子-.等等 水果 西瓜.桃子.苹果-.等等 数据类型:就是对数据分类的一个划分而已 整型就是整数 我 ...
- 在使用Hibernate save()方法的时候 报错: org.hibernate.exception.ConstraintViolationException:could not perform addBath
org.hibernate.exception.ConstraintViolationException:could not perform addBath 错误可能原因:实体属性的值与数据库字段类型 ...
- ZOJ 3964 NIM变形
LINK 题意:n堆石子,Alice 和 Bob 轮流取石子,谁不能再取或被对方取完为败.但是对于alice拥有限制:b=0此堆正常无限制:b=1此堆Alice只能取奇数个石子:b=2只能取偶数个石子 ...
- [Luogu 1967] NOIP2013 货车运输
[Luogu 1967] NOIP2013 货车运输 一年多前令我十分头大的老题终于可以随手切掉了- 然而我这码风又变毒瘤了,我也很绝望. 看着一年前不带类不加空格不空行的清纯码风啊,时光也好像回去了 ...
- 使用itextpdf提取pdf内容
package test; import java.io.FileInputStream; import java.io.IOException; import java.util.ArrayList ...
- spring boot(一):入门
Spring Boot的优点 Spring Boot 是伴随着 Spring 4.0 诞生的,从字面理解,Boot是引导的意思,因此 Spring Boot 旨在帮助开发者快速搭建 Spring 框架 ...
- JQuery 中三十一种选择器的应用
选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记都是通过不同的CSS选择器进行控制的.用户只需要通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果. ...
- HDU3681 Prison Break
Time Limit: 5000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submission( ...
- python初步学习-面向对象之 类(二)
方法重写 如果你的父类方法的功能不能满足你的需求,你可以在子类重写你父类的方法: #!/usr/bin/env python #coding:utf8 class Parent: def myMeth ...