如何改变背景图片大小
CSS是一门用于表现网页布局和样式的语言，是网页开发中不可或缺的一部分。其中，背景图片是网页美化的重要元素之一。本文将为大家介绍如何利用CSS来改变背景图片的大小。
1. 利用background-size属性控制背景图片大小
background-size是CSS3中新增的属性，可以控制背景图片的大小。在background-size中，可以设置两个值，分别代表宽度和高度，也可以只设置一个值。例如：
body {
background-image: url(bg.jpg);
background-size: 100% auto;
}
上述示例中，我们将背景图片的宽度设置为100%，高度根据图片比例自适应。也可以将高度设置为具体数值，如：
body {
background-image: url(bg.jpg);
background-size: 100% 500px;
}
上述示例中，我们将背景图片的宽度设置为100%，高度固定为500px。
需要注意的是，使用background-size属性时，如果只设置一个值，那么该值会被映射到宽度和高度上。也就是说，设置background-size: 50%时，相当于同时设置了background-size: 50% 50%。
此外，background-size属性还可以设置为cover和contain两个值。cover表示背景图片将被缩放以适应容器，同时部分背景图片可能不可见。contain表示背景图片将被缩放以适应容器，同时始终保持完整可见。
2. 利用background-position和background-repeat属性控制背景图片大小
background-size属性虽然在控制背景图片大小方面十分方便，但是有些老旧浏览器不支持此属性。因此，我们还可以利用background-position和background-repeat两个属性来控制背景图片的大小。
其中，background-position属性用于设置背景图片的位置，如：
body {
background-image: url(bg.jpg);
background-position: center top;
}
上述示例中，我们将背景图片设置为居中顶部对齐。
background-repeat属性用于设置背景图片的重复方式，如：
body {
background-image: url(bg.jpg);
background-repeat: repeat-x;
}
上述示例中，我们将背景图片设置为水平方向重复。
当我们对background-position和background-repeat两个属性进行适当的设置时，就可以达到控制背景图片大小的目的。例如，将background-repeat设置为no-repeat，将background-position设置为居中，并且将容器的宽高设置为背景图片的实际宽高：
body {
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-position: center center;
width: 800px;
height: 500px;
}
上述示例中，容器的宽度为800px，高度为500px，背景图片的宽度和高度都为800px。因此，在no-repeat和居中的情况下，我们可以达到控制背景图片大小的效果。
总结
本文介绍了两种方式来控制背景图片的大小，即利用background-size属性和利用background-position和background-repeat两个属性。在实际开发中，我们需要考虑浏览器兼容性和适用场景，选择合适的方式来控制背景图片大小。
通过以上的内容介绍，相信大家对如何控制背景图片大小已经有了更充分的了解。在今后的开发中，可以更加灵活的运用这些方法，并根据实际需要进行组合使用。