今天讲解一下简单的背景图片大小、位置，因为前段时间遇到手机上下留白太多，背景图片被拉伸的问题
主要是对background-size属性值的各个演示
使用的图片是这张 400*640大小
老规矩，直接代码效果图，大家肯定能看明白
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>背景图片的位置及大小，各属性讲解</title><style>.bgimg1{width: 300px;height: 300px;border: 3px solid #ccc;background: url(img/1.jpg) no-repeat;background-size: cover;}.bgimg2{width: 300px;height: 300px;border: 3px solid #ccc;background: url(img/1.jpg) no-repeat center center;background-size: cover;}.bgimg3{width: 300px;height: 300px;border: 3px solid #ccc;background: url(img/1.jpg) no-repeat;background-size: contain;}.bgimg4{width: 300px;height: 300px;border: 3px solid #ccc;background: url(img/1.jpg) no-repeat center center;background-size: contain;}.bgimg5{width: 300px;height: 300px;border: 3px solid #ccc;background: url(img/1.jpg) no-repeat;background-size: 100% 100%;}</style></head><body><!--图一是400*640--><!--图二是400*250--><div class="bgimg1"></div><br/><br/><div class="bgimg2"></div><br/><br/><div class="bgimg3"></div><br/><br/><div class="bgimg4"></div><br/><br/><div class="bgimg5"></div><br/><br/></body></html>
