background属性包含background-image属性,是在一个声明中设置所有的背景属性。
连background-image在内,background属性包含以下:
background-color 规定要使用的背景颜色。1
background-position 规定背景图像的位置。1
background-size 规定背景图片的尺寸。3
background-repeat 规定如何重复背景图像。1
background-origin 规定背景图片的定位区域。3
background-clip 规定背景的绘制区域。3
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。1
background-image 规定要使用的背景图像。1
inherit 规定应该从父元素继承 background 属性的设置。1
通常在写css的时候,一般都直接用background做全局设置,不单独去设置。
用background做全局设置时,要将所有背景属性写在一个声明中
body { background: red }
p { background: url("chess.png") 40% / 10em gray round fixed border-box}
分拆写法如下
body {
background-color: red
background-position: 0% 0%
background-size: auto
background-repeat: repeat
background-clip: border-box
background-origin: padding-box
background-attachment: scroll
background-image: none }
p {
background-color: gray
background-position: 40% 50%
background-size: 10em 10em
background-repeat: round
background-clip: border-box
background-origin: border-box
background-attachment: fixed
background-image: url(chess.png) }
background:no-repeat scroll 0px 0px / 300px 300px rgba(0, 0, 0, 0)
background-position与background-size之间 必须用 / 做分割
前面是background-position 后面是 background-size
在CSS2.1里,background属性的简写方式包含五种属性值,从CSS3开始,又增加了3个新的属性值,加起来一共8个。 CSS2.1 background-color使用的背景颜色。 background-image使用的背景图像。 background-repeat如何重复背景图像。 background-attachment背景图像是否固定或者随着页面的其余部分滚动。 background-position背景图像的位置。 CSS3 background-size背景图片的尺寸。默认值:'auto' 其他值:像素,百分比,contain,cover background-origin背景图片的定位区域。 默认值:'padding-box' 'border-box' 、'content-box'(定义背景图片绘制的开始点) background-clip背景的绘制区域。 默认值:'border-box' 还有'padding-box'、'content-box'(定义背景绘制的开始点)简写方式: background:background-color background-image background-repeat background-attachment background-position / background-size background-origin background-clip 不设置的属性可以省略 background-Origin属性指定background-position属性应该是相对位置。注意1、如果背景图像background-attachment是"固定",background-origin属性没有任何效果。 2、background-origin 和background-clip很容易混淆,前者是对背景图片而言,后者是对背景而言。不是一个概念。clip默认值比origin默认值范围大,所以默认不会有裁剪效果,如果想设置裁剪,可以把origin范围设置的比clip大就好。比如:origin:'border-box',clip:'padding-box'或者'content-box'. 3、background-size中contain和cover的区别。 cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。完全覆盖,可能有图片显示不完整的情况。 contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。可能有空白区域 如下图一设置的contain,图二设置的cover