css背景图片铺满

在网页设计中，背景图片的运用能够极大地提升网站的视觉效果，使得网站更具吸引力，如何让背景图片在网页上铺满并保持良好的显示效果，是许多设计师面临的问题，本文将详细介绍如何使用CSS来实现背景图片的铺满效果。

我们需要了解的是，CSS中的background-size属性是用来控制背景图片的大小的，这个属性有四个值可以选择：cover、contain、auto和100% 100%，cover表示背景图片会被放大或缩小以完全覆盖整个容器；contain则表示背景图片会被等比例缩小或放大以完全适应容器；auto则表示背景图片的原始尺寸会被保持；100% 100%则表示背景图片的宽度和高度都会被设置为100%。

如何利用这些属性来实现背景图片的铺满效果呢？

1、cover：如果你想要背景图片完全覆盖整个容器，无论容器的大小如何变化，你都可以使用cover属性，你可以这样设置：body {background: url(bg.jpg) no-repeat center center fixed; background-size: cover;}，这样，无论浏览器窗口的大小如何变化，背景图片都会始终保持完整，不会被裁剪。

2、contain：如果你想要背景图片完全适应容器，但保持其原始的比例，你可以使用contain属性，你可以这样设置：div {background: url(bg.jpg) no-repeat center center; background-size: contain;}，这样，无论div的大小如何变化，背景图片都会始终保持其原始的比例，不会被拉伸或压缩。

3、auto：如果你想要背景图片保持其原始的尺寸，你可以使用auto属性，你可以这样设置：p {background: url(bg.jpg) no-repeat center center; background-size: auto;}，这样，无论p的大小如何变化，背景图片都会始终保持其原始的尺寸。

4、100% 100%：如果你想要背景图片的宽度和高度都被设置为100%，你可以使用100% 100%，你可以这样设置：img {background: url(bg.jpg); background-size: 100% 100%;}，这样，无论img的大小如何变化，背景图片的宽度和高度都会被设置为100%。

通过合理地使用CSS的background-size属性，我们可以实现背景图片的铺满效果，从而提升网页的视觉效果，需要注意的是，不同的浏览器对于background-size属性的支持程度可能会有所不同，因此在设计时，我们需要考虑到兼容性问题。