css3-背景图片尺寸裁剪原点多背景等属性

灰太狼 2022-07-14 00:42 214阅读 0赞

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
    /**/
    
            /*background: url(images/baby0.jpg) no-repeat;*/
            /* 设置背景图片大小*/
            /*长和宽*/
            /*background-size:100px 100px;*/
    
            /*background-size: 50% 50%;*/
    
            /*
            background-size取值
            1、具体的长度300px
            2、百分比
            3、cover: 覆盖 ： 图片会完全覆盖盒子，有可能显示不完整, 缩放是等比例的
            4、contain: 包含 ：背景图片会完全等比例 显示盒子中，有可能不会铺满盒子；
            */
            /*background-size: cover;*/
    
            /*background-size: contain;*/
    
    
    /*----------------------------------背景的原点-------------------------------------------*/
            .box{
            /*background-image: url(images/baby0.jpg);*/
            /*background-repeat: no-repeat;*/
    
            /*/!* background-origin: 用于设置背景图片从什么地开始平铺*!/*/
            /*/!*设置不平铺的话 图片以默认大小显示*!/*/
            /*/!*background-origin: padding-box; 、*!/*/
            /*/!*background-origin: content-box;*!/*/
            /*/!*background-size: cover;*!/ cover 覆盖*/
            /*/!*background-origin: border-box;*!/*/
            }
    
    /*----------------------------------背景的裁剪------------------------------------------*/
           .box{
            /*background-image: url(images/baby0.jpg);*/
            /*background-repeat: no-repeat;*/
            /*/!* 设置背景原点为 border-box*!/*/
            /*background-origin: border-box;*/
    
                /*写法 background-clip；border-box*/
            /*border-box： 从border区域向外裁剪背景。*/
            /*padding-box： 从padding区域向外裁剪背景。*/
            /*content-box： 从content区域向外裁剪背景。*/
            /*no-clip： 从border区域向外裁剪背景。*/
           }
    
    
    /*--------------------------------------多背景-------------------------------------------*/
    
            .box{
               /*写法中间用逗号隔开*/
                /*background:url(images/bg1.png) no-repeat left top,*/
                /*url(images/bg2.png) no-repeat right top,*/
                /*url(images/bg4.png) no-repeat left bottom,*/
                /*url(images/bg3.png) no-repeat right bottom,*/
                /*url(images/bg5.png) no-repeat center center;*/
            }
        </style>
    
    </head>
    <body>
    
    </body>
    </html>