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

106-3D转换模块

1.什么是2D和3D

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

112-背景尺寸属性

1.什么是背景尺寸属性

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-背景图片定位区域属性

114-背景绘制区域属性

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;
}