background新增属性
今天解除了几个曾经没有用到的属性,所以想总结并且复习一下。
background-origin属性:有三个属性值,分别是border-box,padding-box,content-box。看到border-box是不是联想到了CSS3中的盒子模型。
box-sizing:border-box。它是为了减少CSS中的盒模型padding和border值计算的繁琐。
首先先说一下:
background-origin属性:它表示 background-position 属性相对于什么位置来定位。
属性值border-box:背景图像相对于边框盒来定位。
属性值padding-box:背景图像相对于内边距框来定位。
属性值content-box:背景图像相对于内容框来定位。
所以我们一般用这个属性做一些精灵图的定位与剪切。
还需要了解的是 background-clip属性:同样也有三个属性值border-box,padding-box,content-box。
background-clip属性规定背景的绘制区域。
值 | 描述 |
---|---|
border-box | 背景被裁剪到边框盒。 |
padding-box | 背景被裁剪到内边距框。 |
content-box | 背景被裁剪到内容框。 |
background新增属性的更多相关文章
- 背景新增属性和css渐变及倒影
背景新增属性和css渐变及倒影 一.background新增属性 background-size:指定对象的背景图像的尺寸大小. background:url() 0 0,url() 0 100%;多 ...
- css3新增属性-background背景
css3新增属性 边框属性 背景属性 文字属性 颜色属性 背景属性 属性 说明 background-image 添加背景图片 background-size 指定背景图像的大小 background ...
- HTML5 学习总结(二)——HTML5新增属性与表单元素
一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...
- HTML5 学习笔记(二)——HTML5新增属性与表单元素
目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...
- HTML5学习总结——HTML5新增属性与表单元素
一HTML5新增属性 1.1contcxtmcnu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> < ...
- background新增的N个强悍功能!!!
background在CSS3中新增样式: [ ] 首先我们先回顾下background的原有样式: background-color 背景颜色 相关属性值: 关键字:red,blue,yellow等 ...
- css3-文本新增属性
rgba:a是设透明度值 应用:background:rgb(255,255,255,0.5) color:rgb(255,255,255,0.5) border:1px solid rgb(255, ...
- 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别
高效开发之SASS篇 作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...
- css3新增属性有哪些?css3中常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...
随机推荐
- oracle中常用的时间格式转换
1:取得当前日期是本月的第几周 select to_char(sysdate,'YYYYMMDD W HH24:MI:SS') from dual; TO_CHAR(SYSDATE,'YY') se ...
- 阿里云数据库自研产品亮相国际顶级会议ICDE 推动云原生数据库成为行业标准
4月9日,澳门当地时间下午4:00-5:30,阿里云在ICDE 2019举办了主题为“云时代的数据库”的专场分享研讨会. 本次专场研讨会由阿里巴巴集团副总裁.高级研究员,阿里云智能数据库产品事业部负责 ...
- selenium 图片上传
WebElement file = driver.findElement(By.name("filename")); 给此元素设置值:file.sendKeys("E: ...
- @topcoder - 2017TCOAlgorithmRound2A - D1L2@ DistanceZeroAndOne
目录 @description@ @solution@ @accepted code@ @details@ @description@ 一个 n 个点的无向简单的连通图,编号从 0 到 n-1. 现给 ...
- BKDRhash
哈希: 字符串(数字同理): 例如有100000个字符串,现在要插入一些字符串,插入前比较是否已经存在避免含有重复数据 用暴力计较的话会比较慢,在某字符串插入时,最好的情况是在第一个位置就遇见该字符 ...
- Hadoop及HIVE学习宝典收集
Hive经常使用命令https://cwiki.apache.org/confluence/display/Hive/GettingStartedhttp://richardxu.com/hiveql ...
- oracle函数 decode(条件,值1,翻译值1,值2,翻译值2,...值n,翻译值n,缺省值)
[功能]根据条件返回相应值 [参数]c1, c2, ...,cn,字符型/数值型/日期型,必须类型相同或null 注:值1……n 不能为条件表达式,这种情况只能用case when then end解 ...
- HZOJ 数颜色
一眼看去树套树啊,我可能是数据结构学傻了…… 是应该去学一下莫队进阶的东西了. 上面那个东西我没有打,所以这里没有代码,而且应该也不难理解吧. 这么多平衡树就算了,不过线段树还是挺好打的. 正解3: ...
- maxCompute odps 行转列
select name ,REGEXP_REPLACE(str,"[\\[\"\\]]",'') from ( select trans_array(, ",& ...
- Layer(Web弹窗)
Layer弹窗的用法: <script src="jQuery的路径"></script> <!-- 你必须先引入jQuery1.8或以上版本 --& ...