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

本文详细介绍了CSS中背景属性的功能及用法,包括背景颜色、背景图片、图片重复方式、图片位置、图片滚动行为等,帮助读者掌握如何设置网页背景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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必须有背景颜色或者背景图片,其余参数是可选参数,有需要就使用。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Master_Yoda

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值