background简写属性

现在流行组合，什么歌唱团体，TFboys、至上励合等等。background属性也赶时髦，它也有组合。我们知道background有很多的单个属性，有background-position、background-repeat等，我们可以把这些background的这些属性简写到组合中，它的格式为：

background:[background-color] [background-image] [background-repeat][background-attachment] [background-position\] / [ background-size][background-origin] [background-clip];

各个单个属性之间用空格分割

比如：

background:#ccc url(http://xiaoyangblogt.duapp.com/wp-content/uploads/2017/11/clip-1.png) repeat-x scroll 0px 0px / 400px 400px border-box padding-box;

background的这些简写属性不必全都写，不写的属性视为缺省值，采用默认值。

比如：

background:#ccc repeat;

缺省值这里要注意一下，其他的属性还好说，要特别注意background-position和background-size这两个属性，因为它们的值都是像0px 0px这种格式的，所以要用这种格式：[background-position] / [background-size],如果简写，没有“/”则表示为background-position的值，而background-size采用缺省值。

比如：

background:#ccc 0px 0px;

此处的0px 0px表示的是background-position属性，而background-size采用的是默认值。

还有background-origin和background-clip属性，他们的值也是一样的，都是border-box、padding-box和content-box属性。所以在简写的时候也要注意，如果简写的属性值其中一个是缺省值，则保持他们的值是一致的。

比如：

background:#ccc border-box;

则表示background-origin和background-clip都采用border-box值。

你可能会有疑问，为什么都有单个的属性了，还要有简写属性，这是不是画蛇添足？当然不是，简写属性的好处就是：

可以向前兼容早期版本的浏览器
简写属性给出一个通用的背景采用的值，单个属性可以相对于某一需求覆盖简写属性的某属性的值。因为单个属性的优先级要高于简写属性的优先级

比如：

body{background: #ccc 0px 0px;
}
body div{background-color:#666;
}

此时div中的background-color属性的值就是#666，而不是#ccc。

微信公众号：

原文链接

background简写属性相关推荐

background复合属性顺序_background：常用背景属性（复合属性）
定义和用法 background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性:background-color | 背景颜色 background-position | 背 ...
css设置title字体_CSS中简写属性要注意TRouBLe的顺序，避免踩坑
简写属性是用于同时给多个属性赋值的属性.比如font是一个简写属性,可以用于设置多种字体属性.它指定了font-style.font-weight.font-size.font-height以及fon ...
双18期|CSS揭秘之简写属性
theme: channing-cyan highlight: a11y-dark 双18期|CSS揭秘之简写属性 tips:每个技术点都值得优学优写:18期一.写在前面 css 简写属性了解吗?前 ...
CSS边框、边距、轮廓（边框宽度/颜色/各边/简写属性/圆角边框/内外边距/高度宽度/框模型/轮廓宽度/颜色/属性/偏移）——万字长文|一文搞懂
目录 CSS边框 CSS 边框属性 CSS 边框样式实例 CSS 边框宽度实例特定边的宽度实例 CSS 边框颜色实例特定边框的颜色实例 HEX 值实例 RGB 值实例 HSL 值实 ...
Background 全属性实例图解（10种全）(一)
Background 全属性实例图解(10种全)(一) 本文目录: 一.background属性: (1).属性描述 (2).background属性使用示例 (3).background动画属性 ( ...
七、CSS背景（background简写）
CSS 背景属性用于定义 HTML 元素的背景,通过背景属性我们可以定义元素的背景颜色.背景图片.背景图片的平铺方式和显示位置等. 1.background-color background-colo ...
Background背景属性
Background背景属性背景属性可以设置背景颜色.背景图片.背景平铺.背景图片位置.背景图像固定等 1.背景颜色源代码 background-color:颜色值; ...
（15）css常用样式—background背景属性
一.背景属性概述 CSS 中除了布局类属性,还需要添加一些背景类的内容进行页面的修饰,从而让网页变得更加的美观. CSS 中通过 background 属性来设置背景,它是一个综合属性,可以拆分成多 ...
background系列属性
1.background-color背景颜色属性 ①颜色表示方法英语单词:red blue purple skyblue. rgb:r代表红色 g代表绿色 b代表蓝色也 ...
php外边距的代码,外边距简写属性 margin
浏览器支持表格中的数字表示支持该属性的第一个浏览器版本号属性定义及使用说明 margin简写属性在一个声明中设置所有外边距属性.该属性可以有1到4个值. 代码解析 margin:10px 5px ...

background简写属性

background简写属性相关推荐

最新文章

热门文章