background-size记得我刚开始学的时候,做作业很多次都遇到背景不能铺满问题。
属性规定背景图像的尺寸
background-size: 背景图片宽度 背景图片高度;单位: 长度|百分比|cover|contain;
cover把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
像这样
背景图片并不能完全缩放至跟我div的大小一样。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 300px;height: 200px;margin: 100px auto;background: url(/pic_360/20/70/73/2070733e9322826869576bb01aee40d8.jpg) no-repeat;background-size: 300px 200px;}</style></head><body><div></div></body></html>
我的div宽是300px,高是200px。所以的我background-size宽高也为300px,200px。
效果: