CSS字体、文本、背景属性设置三——背景属性

1.背景颜色属性:background-color
用于设置网页或网页元素的背景颜色,设置语法如下:

background-color:颜色的英文单词|颜色的十六进制数|颜色的RGB值|transparent|inherit;

语法说明:属性transparent用于设置透明背景,为默认的的背景颜色。
2. 背景图片属性:background-image
用于设置背景图片,设置语法如下:

background-image:url(image_file_path)|inherit;

其中image_file_path用于指定背景图片的路径,inherit继承父元素的background-image属性
3.背景图片重复属性:background-repeat
可以设置图片是否重复显示,设置语法如下:

background-repeat:repeat|erpeat-x|repeat-y|no-repeat|inherit;

参数说明:

属性值 描述
repeat 默认值,背景图片在水平方向和垂直方向都重复
repeat-x 背景图片只在水平方向重复
repeat-y 背景图片只在垂直方向重复
no-repeat 背景图片只显示一次
inherit 继承父级background-repeat的属性值

4. 背景图片位置属性:background-position
该属性可设置图片从某一个特定的位置开始显示,设置语法如下:

background-positon:表示位置的关键字|x% y%|xpos ypos;

这里写图片描述
注:偏移量为百分数,定位时折合为xpos ypos,其中xpos=(元素的宽度-背景图片的宽度)*x%,ypos=(元素的高度-背景图片的高度)y%.
5.背景图片滚动属性:background-attachment
该属性可以设置背景图片是否随着页面的滚动条滚动,设置语法如下:

background-attachment:scroll|fixed|inherit;
属性值 描述
scroll 默认值,背景图片会随着页面滚动条的滚动而移动
fixed 页面滚动条滚动时,背景图片不会移动
inherit 继承父元素的background-attachment

6.背景属性:background
使用背景属性可以一次性地设置背景的所有样式,设置语法如下:

background: background-color|background-image[|background-position|background-repeat|background-attachment]

语法说明:各个属性值之间使用空格分隔,background必须有背景颜色或者背景图片,其余参数是可选参数,有需要就使用。

猜你喜欢

转载自blog.csdn.net/dream_follower/article/details/81018830