背景相关
背景尺寸属性是CSS3中新增的一个属性, 专门用于设置背景图片
7种方式设置背景图片
background: url("images/dog.jpg") no-repeat;
background-size:200px 100px;
background-size:100% 80%;
background-size:auto 100px;
background-size:100px auto;
background: url("images/dog.jpg") no-repeat;
background-size:cover;
1.图片需要等比拉伸
2.拉伸到宽度和高度同时填满画面,多出部分进行裁剪
background: url("images/dog.jpg") no-repeat;
background-size:contain;
1.图片需要等比拉伸
2.拉伸到宽度或高度任意参数填满画面就可
多重背景图片
多张背景图片之间用逗号,
隔开即可
background-image: url("images/animal1.png"),url("images/animal2.png"),url("images/animal3.png");
- 先添加的背景图片会盖住后添加的背景图片,呈倒序
- 建议在编写多重背 景时属性分别编写
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;
}