【web前端开发】CSS背景相关内容

背景颜色

属性名:background-color
取值:表示颜色的取值都可以填写,如:rgb

注意点:

  • 背景颜色默认是透明的
  • 背景颜色不影响盒子的大小

实用技巧:在平时使用一些盒子时,可以给盒子设置背景颜色,这样可以看清盒子的大小和位置

示例:
在这里插入图片描述
在这里插入图片描述

背景图片

属性名:background-image
属性值:url('图片的路径')

注意点:

  • url中的引号可以省略
  • 背景图片默认水平和垂直方向是铺平的
  • 背景图片和背景颜色一样,是不能撑开盒子的

背景平铺

属性名:background-repeat

属性值:

取值效果
repeat水平竖直方向都平铺(默认值)
no-repeat不平铺
repeat-x沿水平方向平铺
repeat-y沿竖直方向平铺

背景位置

属性名:background-position
属性值:水平方向 竖直方向

属性值取值有两种:1.方位名词 2.数字+px(坐标)
1.方位名词

方位取值
水平方向left center right
竖直方向top center bottom

可以把一个盒子看成一个九宫格,最多可以表示9个方位

2.数字+px

  • 坐标原点(0,0)在左上角
  • x轴:水平向右
  • y轴:水平向左

方位名词和坐标取值可以混用

background(复合属性)

背景也有复合属性(多个属性值写在同一个属性名里)

属性名:background
属性值:单个属性值合写,属性值之间用空格隔开(没有先后顺序,可以按需求省略)
  • 背景图位置如果是英文写法可以颠倒顺序,但如果是坐标形式则不能颠倒位置
  • 推荐写法:background:color image repeat position

感谢你的观看!希望这篇文章能帮到你!
专栏web前端开发在不断更新中,欢迎订阅!
“愿与君共勉,携手共进!”
在这里插入图片描述

  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

比奇堡的天没有云

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

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

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

打赏作者

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

抵扣说明:

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

余额充值