美文网首页
CSS3笔记(三)背景

CSS3笔记(三)背景

作者: 麓语 | 来源:发表于2018-04-15 15:02 被阅读0次

    1、回顾css2 背景属性

    background-color,
    backgorund-image,
    background-position,
    background-repeat
    

    2、背景尺寸

    background-size: 宽 高;
    500px  500px
    50% 50%  百分比是相对于盒子自身的宽高的
    cover:覆盖   保证背景图片会等比例完全铺满盒子,不保证可以完整显示图片
    contain:包含  保证背景图片等比例最大化的 在盒子中完整是显示,不保证铺满盒子
    

    3、背景原点

    background-origin:   用于指定背景图片从那个盒子开始平铺
    padding-box: 默认值
    border-box
    content-box
    

    4、背景裁剪

    background-clip: 指定背景图片从那个盒子开始裁剪
    border-box (默认值)
    content-box
    padding-box
    

    4、多背景

    多背景: 每个背景按照 正常的语法格式书写,多个背景之间使用逗号隔开
    背景层级:先写的背景层级高,后写的层级低,通过过控制背景的属性先后顺序来控制层级;
    
    background:
    url(images/bg1.png) no-repeat left top,
    url(images/bg2.png) no-repeat right top,
    url(images/bg3.png) no-repeat right bottom,
    url(images/bg4.png) no-repeat left bottom,
    url(images/baby0.jpg) no-repeat center center,
    url(images/bg5.png) no-repeat center center;
    

    相关文章

      网友评论

          本文标题:CSS3笔记(三)背景

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