美文网首页
day23-CSS-背景相关属性

day23-CSS-背景相关属性

作者: 喵鸢 | 来源:发表于2017-06-22 23:29 被阅读16次

    背景尺寸属性

    • CSS3中新增属性,专门用于设置背景图片大小
    • 取值background-size:x轴 y轴
      • 默认
      • 具体像素
      • 百分比
      • 宽度等比拉伸---谁auto设置谁等比例拉伸,保证不变形
      • 高度等比拉伸---谁auto设置谁等比例拉伸,保证不变形
      • cover
        • 图片需要等比拉伸
        • 高度和宽度都填满整个网页
      • contain
        • 图片需要等比拉伸
        • 高度或宽度满足时则不拉伸了

    背景图片定位区域属性

    • background-origin--告诉系统背景图片从哪个区域开始显示
      • 默认是从padding处开始显示
    • padding-box
    • border-box
    • content-box

    背景绘制区域属性

    • background-clip--告诉系统背景从哪个区域开始绘制的
      • 默认背景颜色是从boder处开始绘制
    • padding-box
    • border-box
    • content-box

    CSS3多重背景图片

    • 多张背景图片之间用逗号隔开
      • 先添加背景图片的会覆盖着后添加的背景图片
      • 可以用定位top left等进行定位
    • 注意点:
      • 多重背景图片不利于阅读,建议拆开来写
      • background-image:图片1,图片2,
      • background-repeat:图片1no-repeat,图片2no-repeat
      • background-position:left top,right top,

    相关文章

      网友评论

          本文标题:day23-CSS-背景相关属性

          本文链接:https://www.haomeiwen.com/subject/euifcxtx.html