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

<!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>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值