之前在学习CSS的background的时候比较模糊的认识了部分属性,位置,url地址,大小等,这回重新详细认识下它的全部属性,以及书写的顺序。

css 中 background的属性详细分析

background

background 是CSS简写属性,用来集中设置各种背景属性。background 可以用来设置一个或多个属性:background-color, background-image, background-position, background-repeat, background-size, background-attachment
以上是MDN对css的background的介绍。
background 将指定的背景属性设为明确给定的值,将没有指定的背景属性设为初始值。

as each of the properties of the shorthand:
background-image: none
background-position: 0% 0%
background-size: auto auto
background-repeat: repeat
background-origin: padding-box
background-clip: border-box
background-attachment: scroll
background-color: transparent

第一个属性是background-image,The background-image CSS property sets one or more background images on an element.我们为元素背景填写url地址,即图片的地址。

第二个属性是background-position, The background-position CSS property sets the initial position, relative to the background position layer defined by background-origin, for each defined background image.我们为元素背景设定初始位置,可以使用关键词(left top 等),也可以使用百分数。

第三个属性是background-size, The background-size CSS property specifies the size of an element’s background image. The image can be left to its natural size, stretched to a new size, or constrained to fit the available space while preserving its intrinsic proportions.我们为元素背景设定大小,可以使用原图大小,也可以对其进行拉伸和压缩,其中contain为纵向填充100%,cover为横向填充100%。

第四个属性是background-repeat,The background-repeat CSS property defines how background images are repeated. A background image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all.我们为元素背景设定重复方式,大部分情况都设为不重复,no-repeat。

attation!这里是最为容易混淆的两个属性background-origin和background-clip

第五个属性是background-origin,第六个属性是background-clip,这两个属性效果看起来很相似,很难分辨,其中,background-clip 指定了背景在哪些区域可以显示,但与背景开始绘制的位置无关,背景的绘制的位置可以出现在不显示背景的区域,这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。而background-origin指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置,你可以用这个属性在边框上绘制背景,但边框上的背景显不显示出来那就要由background-clip来决定。

第七个属性是background-attachment,If a background-image is specified, the background-attachment CSS property determines whether that image’s position is fixed within the viewport, or scrolls along with its containing block.我们为元素背景设定随视口变换的方式,固定fixed会有上层覆盖的既视感,默认滚动scroll。

第八个属性是background-color,The background-color CSS property sets the background color of an element.我们为元素背景设定纯色,很容易理解,一般情况下,在使用背景图片时,很少使用,但是一定是在属性值得末尾,不然不会生效。

还有一点就是,同时设置background-position和background-size时,中间需要使用 | 隔开,不然不会生效。