HTML入门学习笔记--CSS 3D转换模块和背景相关(12)

106-3D转换模块

1.什么是2D和3D

        2D就是一个平面, 只有宽度和高度, 没有厚度
        3D就是一个立体, 有宽度和高度, 还有厚度
        默认情况下所有的元素都是呈2D展现的
        2.如何让某个元素呈3D展现
        和透视一样, 想看到某个元素的3d效果, 只需要给他的父元素添加一个transform-style属性, 然后设置为preserve-3d即可

112-背景尺寸属性

1.什么是背景尺寸属性

背景尺寸属性是CSS3中新增的一个属性, 专门用于设置背景图片大小

    ul li:nth-child(1){
        background: url("images/dog.jpg") no-repeat;
    }
    ul li:nth-child(2){
        background: url("images/dog.jpg") no-repeat;
        /*
        第一个参数:宽度
        第二个参数:高度
        */
        background-size:200px 100px;
    }
    ul li:nth-child(3){
        background: url("images/dog.jpg") no-repeat;
        /*
        第一个参数:宽度
        第二个参数:高度
        */
        background-size:100% 80%;
    }
    ul li:nth-child(4){
        background: url("images/dog.jpg") no-repeat;
        /*
        第一个参数:宽度
        第二个参数:高度
        */
        background-size:auto 100px;
    }
    ul li:nth-child(5){
        background: url("images/dog.jpg") no-repeat;
        /*
        第一个参数:宽度
        第二个参数:高度
        */
        background-size:100px auto;
    }
    ul li:nth-child(6){
        background: url("images/dog.jpg") no-repeat;
        /*
        cover含义:
        1.告诉系统图片需要等比拉伸
        2.告诉系统图片需要拉伸到宽度和高度都填满元素
        */
        background-size:cover;
    }
    ul li:nth-child(7){
        background: url("images/dog.jpg") no-repeat;
        /*
        cover含义:
        1.告诉系统图片需要等比拉伸
        2.告诉系统图片需要拉伸到宽度或高度都填满元素
        */
        background-size:contain;
    }

113-背景图片定位区域属性

background-origin: 告诉系统背景图片从什么区域开始显示,默认情况下就是从padding区域开始显示

114-背景绘制区域属性

background-clip:背景绘制区域属性是专门用于指定从哪个区域开始绘制背景的, 默认情况下会从border区域开始绘制背景

115-多重背景图片

多张背景图片之间用逗号隔开即可

注意点:
先添加的背景图片会盖住后添加的背景图片

background: url("images/animal1.png") no-repeat left top

建议在编写多重背景时拆开编写

background-image: url("images/animal1.png"),url("images/animal2.png"),url("images/animal3.png");
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: left top, right top, left bottom;
    }