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 ...
随机推荐
- Java转iOS-第一个项目总结(2):遇到问题和解决方案
目录1.UITableView滑动卡顿的优化 2.右滑手势返回 3.添加页面统计 4.debug版和release版 5.关于页面刷新 6.关于页面布局 7.推荐博客 遇到问题和解决方案 本文是Jav ...
- 【NS2】NS2 教學手冊(转载)
之前做毕设的时候搜索NS2的相关资料,发现这个里面涵盖很广,特此收藏,感谢原作者的辛勤劳作. NS2 教學手冊 ( NS2 Learning Guide) [快速連結區] My works 中文影音 ...
- Ubuntu18.04 systemd开机自启
本文是该文的整理版. Ubuntu18.04不再使用initd管理系统,改用systemd.为了像以前一样,在/etc/rc.local中设置开机启动程序,需要以下几步: 1.systemd默认读取/ ...
- SGU 107 987654321 problem【找规律】
题目链接: http://acm.sgu.ru/problem.php?contest=0&problem=107 题意: 平方后几位为987654321的n位数有多少个 分析: 虽然说是水题 ...
- 【datagrid】动态加载列 2016-01-03 16:32 2013人阅读 评论(19) 收藏
之前我们的项目在前台显示只需要把数据从数据库读出来进行显示就可以,datagrid的表头字段都是写死的,把数据往表里一扔,就基本没什么事儿了,结果客户前几天要求,其中一个字段不能是死的,应该是有多少项 ...
- Redis源码解析:07压缩列表
压缩列表(ziplist)是列表键和哈希键的底层实现之一.当列表键只包含少量列表项,并且每个列表项要么是小整数值,要么是长度较短的字符串时:或者当哈希键只包含少量键值对,并且每个键值对的键和值要么是小 ...
- 云原生生态周报 Vol. 3 | Java 8 ❤️ Docker
摘要: Docker Hub遭入侵,19万账号被泄露:Java 8 终于开始提供良好的容器支持:Snyk 年度安全报告出炉,容器安全问题形势空前严峻. 业界要闻 Docker Hub遭入侵,19万账号 ...
- Vue.js 第1章 Vue常用指令学习
今日目标 能够写出第一个vue应用程序 能够接受为什么需要学vue 能够使用指令 能够通过指定完成简单的业务(增加删除查询) 能够理解mvvm 为什么要学习vue 企业需要 可以提高开发效率 实现vu ...
- mysql 中 DATE_ADD函数和 DATE_SUB函数用法
mysql 中 DATE_ADD(date,INTERVAL expr type) 和 DATE_SUB(date,INTERVAL expr type) 这些函数执行日期运算. date 是一个 D ...
- Remove Extra One 权值线段树
最近疯狂练习线段树... 这道题题意很简单,在1-n中,找寻一个数,使得去掉这个数后,对于每个位置中满足 1<=j<i && a[ j ]<a[ i ] 的位置尽可能 ...