background属性总结

background属性总结

1、background-color
  • 背景颜色:所有合法的颜色值都可以设置。
2、background-clip
  • 背景图片裁剪区域。属性值有:
    • border-box,背景被裁剪到边框盒。
    • padding-box,背景被裁剪到内边距框。
    • content-box,背景被裁剪到内容框。
3、background-image
  • 背景图片:使用url来进行设置或使用渐变语法。
4、background-repeat
  • 服务背景图片:设置图片是否进行平铺。属性值有:
    • repeat,xy方向都平铺;
    • no-repeat,不平铺;
    • repeat-x,x方向平铺;
    • repeat-y,y方向平铺;
    • inherit,继承父元素repeat值;
5、background-size
  • 服务背景图片。指定背景图片的大小。属性值有:
    • px、percent(相对于父元素), 接收两个值,表示背景图片的宽高。第二个值省略则为auto(图片原有大小等比例缩放)。
    • cover, 将图片等比例缩放足够大使得完全覆盖背景区域。
    • contain, 将图片等比例缩放,使得其宽度和高度完全适应内容区域。
6、background-position
  • 服务背景图片。用来修改背景图片的位置。属性值有:
    • top | right | bottom | left | center, 分别表示水平和垂直方向的位置,如果第二个值不传则默认是center。
    • percent、px, 分别表示水平和垂直方向的位置,如果第二个值不传则默认是50%。正值表示图片向右/下移动。负值表示图片向左/上移动。
7、background-origin
  • 服务背景图片。规定background-position属性相对于什么位置来定位。
    • padding-box,
    • border-box,
    • content-box,

    注意:
    默认值是padding-box,而background-clip的默认值是border-box,background-repeat的默认值是repeat。所以当border设置为透明边框时,会发现边框是有背景图的,但是并不是从边框的左上方开始的,而是从padding-box的左上方开始的。当我们需要设置背景图片从border-box的左上方开始,我们需要设置background-origin的值为border-box即可。

8、background-attachment
  • 服务背景图片。表示盒子内容进行滚动是背景图片是否随着内容进行滚动。
    • fixed, 表示不随着内容滚动而滚动。
    • scroll, 表示随着内容滚动而滚动。
    • inheit, 表示继承父元素的background-attachment属性值。
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值