css背景样式background

时间:2022-06-26 16:06:59

background用来定义html元素的背景效果

background-color:定义元素的背景颜色,背景的颜色值通常有三种定义方法

1.十六进制方式,如"#ff0000"

2.RGB方式,如"rgb(255,0,0)"

3.颜色名称,如"red"

background-image:定义元素的背景图片,通过background-image:url('path/图片名称')指定

默认情况下,背景图片会在水平和垂直方向上进行平铺重复显示,即默认的background-repeat值为repeat

background-repeat:定义元素的背景图片是否以及如何重复显示

默认值值repeat,no-repeat、repeat-x、repeat-y分别表示不重复、在水平方向、垂直方向重复显示

background-attachment:定义元素的背景图片是否固定或者随着页面的其余部分滚动

默认值为scroll随页面部分滚动,fixed表示固定不滚动,inherit表示从父元素继承

background-position:定义元素的背景图片起始位置,例如定义图片右上角不重复显示

(left center right * top center bottom)九种组合,并且这两个值如果只指定一个那么另外一个默认为center

x% y%:表示水平位置和垂直位置,默认为左上角0% 0%,右下角是100% 100%,

xpos ypos:表示水平位置和垂直位置

inherit表示从父元素继承

背景效果通过上述5个属性来控制,为使用方便可以将这些属性合并在一起,简写为 "background",当时用简写属性时,顺序为color、image、repeat、attachment、position,可根据实际需要选择,无需全部使用,例如

body {background:lightpink url('img_tree.png') no-repeat right top;}