html设置背景图片颜色,CSS设置背景图片及背景颜色示例

1.设置背景颜色

background-color是CSS中的背景颜色属性,这个属性用于为HTML元素设定背景颜色,可以设置整个网页的背景颜色,也可以设置网页中某部分元素的背景颜色,比如表格背景颜色、层背景颜色等等。

示例1:

这段代码设置整个网页的背景颜色为蓝色#0080FF

2.设置背景图片

(1)background-image是CSS中的背景图片属性,这个属性用于为HTML元素设定背景图片,可以设置整个网页的背景图片,也可以设置网页中某部分元素的背景图片,比如表格背景图片、层背景图片等等。

示例2:

这段代码设置整个网页的背景图片,网页和图片可以存放在不同的网站空间内,背景图片既横向重复又竖向重复。

示例3:

如果网页和图片存放在同一个网站空间内,图片位于images目录下,示例1的代码也可以用图片的相对路径写法:

(2)background-repeat是CSS中的背景重复属性,这个属性通常与background-image一起使用,控制背景图片的重复显示方式,属性值包括:

·

repeat-x 背景图片横向重复

· repeat-y 背景图片竖向重复

· no-repeat 背景图片不重复

示例4:

这段代码设置网页的背景图片,背景图片仅竖向重复。

示例5:

这段代码设置网页的背景图片,背景图片仅横向重复。

示例6:

这段代码设置网页的背景图片,背景图片不重复。

(3)background-attachment是CSS中的背景附着属性,这个属性通常与background-image一起使用,控制背景图片是跟随网页内容滚动,还是固定不动,属性值包括:

·

scroll(缺省值)

· fixed

示例7:

这段代码设置网页的背景图片,背景图片不重复,且不随网页内容滚动。

(4)background-attachment是CSS中的背景位置属性,这个属性通常与background-image一起使用,控制背景图片的最初位置。

示例8:

这段代码设置网页的背景图片,背景图片不重复,随网页内容滚动,背景图片的初始位置距网页最左边50px,距网页最顶端30px。

(4)background是CSS中的背景属性,这个属性是个综合属性,可以把以上种种单独定义的背景属性合并在一起,简化代码,不同背景属性之间用空格间隔。

示例9:

这段代码设置网页的背景颜色为蓝色#0080FF,背景图片不重复,且不随网页内容滚动,背景图片的初始位置距网页最左边50px,距网页最顶端30px。

  • 0
    点赞
  • 0
    收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值