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 ...
随机推荐
- 在laravel框架中使用ajax请求报错419
laravel框架中报419 419 unknown status 这个时候你需要将这个接口放到api路由上,这样可以跳过CSRF的检查
- LeetCode99 Recover Binary Search Tree
Two elements of a binary search tree (BST) are swapped by mistake. Recover the tree without changing ...
- 动态设置iframe高度
<%//动态设置iframe高度 %><script language="javascript" type="text/javascript" ...
- install tushare in python 3.6
install tushare (D:\Anaconda3) C:\Users\Administrator>pip install tushare Collecting tushare Down ...
- How to use AutoMapper
http://docs.automapper.org/en/stable/Getting-started.html IMappingExpression<TSource, TDestinatio ...
- 使用epoll实现简单的服务器
1. 头文件 #ifndef __TCP_SERVER_H__ #define __TCP_SERVER_H__ #include <unistd.h> #include <stdi ...
- oracle 减少对表的查询
在含有子查询的SQL语句中,要特别注意减少对表的查询. 例如: 低效 SELECT TAB_NAME FROM TABLES WHERE TAB_NAME = ( SELECT TAB_NAME FR ...
- spark sql thrift server
### create data ## cat ## echo "$(date ;echo ## cat }'";exit}' ..} do passwd) echo "$ ...
- python中break和continue的区别
python中break和continue的区别 break和continue 1.break 意思为结束循环 例: i = 0 while i<10: i+=1 if ...
- Unity5.6.4f1 配置WebGL教程
Unity 5.6.4f1 发布WebGL的配置教程 步骤一:先查看自带的Unity是否yi配置好WebGL的项,若无,则可遵循以下教程来设置 步骤二:下图是我已经设置好的,未设置好的状态是,有个Op ...