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 ...
随机推荐
- KiCad 5.1.3 尝鲜版已经有了
KiCad 5.1.3 尝鲜版已经有了 发现一个改动. 对调了对话框按钮的位置,和 Windows 习惯一样了.
- 2018-8-9-win10-uwp-装机必备应用-含源代码
title author date CreateTime categories win10 uwp 装机必备应用 含源代码 lindexi 2018-8-9 9:7:31 +0800 2018-8-9 ...
- UI2CODE复杂背景无法识别?闲鱼工程师这样打造高准确率方案
引言: 复杂背景内容提取指的是从复杂的背景中提取出特定的内容,例如在图片中提取特定的文字,在图片中提取特定的叠加图层等等.这是一个业界难题,基于传统的图像处理的方法存在准确率和召回率的问题,没法解决语 ...
- dva框架简单描述使用
首先传统的create-router-app脚手架生成的脚手架我们写仓库的时候用reducers进行调用还有thunk进行异步操作的时候,需要多层函数进行调用,这样会让我们代码进行维护的时候变得麻烦, ...
- Java面向对象----多态概念,对象上下转型
概念:同一操作作用于某一类对象,可以有不同的解释,产生不同的执行结果 多态存在的三个必要条件 需要存在继承和实现关系 同样的 方法调用而执行不同操作,运行不同的代码(重写操作) 在运行时父类或者接口的 ...
- AtCoder Beginner Contest 075 D - Axis-Parallel Rectangle【暴力】
AtCoder Beginner Contest 075 D - Axis-Parallel Rectangle 我要崩溃,当时还以为是需要什么离散化的,原来是暴力,特么五层循环....我自己写怎么都 ...
- 使用css制作三角
1. 字符实现三角效果关于字符实现三角我早在09年的时候就介绍了:使用字符实现兼容性的圆角尖角效果.一转眼两年过去了,这个技术开始被越来越多的人所熟知.使用的字符是正棱形“◆”字符,编码表示为◆ . ...
- oracle函数 LENGTH(c1)
[功能]返回字符串的长度; [说明]多字节符(汉字.全角符等),按1个字符计算 [参数]C1 字符串 [返回]数值型 [示例] SQL> select length('高乾竞'),length( ...
- Python基础:常用函数
1:enumerate enumerate(sequence, start=0) 该函数返回一个enumerate对象(一个迭代器).其中的sequence参数可以是序列.迭代器或者支持迭代的其他对象 ...
- @hdu - 6584@ Meteor
目录 @description@ @solution@ @accepted code@ @details@ @description@ 询问第 k 小的分子分母 ≤ n 的既约分数. Input 第一 ...