1.CSS background属性与background-image属性

html-css013

1.CSS background属性与background-image属性,第1张

在书写css样式时,background属性与background-image经常用来设置背景图片,容易搞混。

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