CSS——background系列

背景样式background共计九个属性:

background
属性名属性名含义属性值属性值含义
background背景合写依照下列顺序写 
background-color背景颜色#333|rgba(255,255,255,0.5)|red三种表示法都可以
background-position背景图开始的位置

X轴:center|200px|50%


Y轴:center|300px|50%

三种表示方法都可以(若写一个值,则为X轴,Y轴方向为center)
background-size背景图尺寸(默认为auto,若写一个为width,height默认为auto)contain

cover


auto


100px 200px


30% 30%

包含:可能有空隙,图片完整

覆盖:没有空隙,可能图片不完整


自适应:原有比例


 宽度像素值 高度像素值


宽度百分比 高度百分比

background-repeat重复平铺no-repeat| repeat-x| repeat-y| repeat  
background-origin背景图相对于谁来定位border-box| padding-box|content-box当attachment属性值设置为fixed时,该属性没有效果
background-clip背景图的绘制位置border-box|padding-box|content-box 
background-attachment如何固定背景图scroll

fixed

(scroll)默认值,背景图会随着页面的滚动而滚动

当页面其余部分滚动时,背景图不会滚动

background-image设置背景图片url(".././a.jpg")|none默认值为none,多重背景用逗号隔开
inherit   

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值