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
background-color 背景颜色background-repeat 重复背景图像
background-position 背景图像位置
background-size 背景图像大小
background-origin 背景图像的定位区域
background-image 渐变