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

最新推荐文章于 2024-07-05 09:52:23 发布

约德尔蒙

最新推荐文章于 2024-07-05 09:52:23 发布

阅读量1.2k

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/gyq04551/article/details/53263787

版权

CSS3 专栏收录该内容

15 篇文章 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>