背景属性样式

🍓背景属性

属性名称中文注释备注
background-image背景图片url(img-path)
background-color背景颜色
background-attachment设置背景固定scroll默认值,随盒子滚动, fixed固定,脱离标准流,固定在浏览器窗口,当背景图片不在盒子的显示范围之内,图片将不会展示
background-repeat背景平铺repeat-x横向平铺, repeat-y纵向平铺, no-repeat不平铺
background-position设置背景图片的位置第一个值是水平位置,第二个值是垂直的位置,起点0 0是图片与容器左上角对齐(注意:这是背景图片没有被设置成fixed的情况,设置成fixed则会相对于整个页面窗口设置位置)
background-size设置背景图片大小- 两个值宽,高,设置这个可能会导致图片失真
- cover图片等比例放大,全部覆盖容器,但是图片超过的部分不显示
- contain图片等比例放大,尽量覆盖容器,但是不会以图片失真为代价覆盖整个容器,所以可能会有部分地区不能完全覆盖
background背景缩写可以合并background-colorbackground-imagebackground-repeatbackground-positionbackground-attachment,没有固定的顺序,任何属性都能省略,但是省略会覆盖你前面这些属性设置的值,不能合并background-size
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值