CSS实现背景图片铺满

1. 使用 background-size: cover; 实现图片铺满

这是实现背景图片铺满的最常用方法，cover 会使图片根据容器的大小进行缩放，始终保持图片的完整覆盖。即便容器的尺寸发生变化，图片也会自动调整比例并保持填充。

<div class="full-background"></div>

.full-background { 
width: 100vw; /* 视窗宽度 */ 
height: 100vh; /* 视窗高度 */ 
background-image: url('image.jpg'); 
background-size: cover; 
background-position: center; /* 图片居中 */ 
background-repeat: no-repeat; /* 避免图片重复 */ 
}

• background-size: cover; 会等比例缩放图片，以确保图片完全覆盖容器，并保持图片的长宽比。可能会部分裁剪图片以适应容器的尺寸。
• background-position: center; 用于确保图片居中显示。

2. 使用 background-size: contain; 保持图片完整展示

与 cover 不同，contain 会在保持图片宽高比的前提下，尽可能让图片完全显示在容器内。如果容器与图片的比例不同，可能会出现空白区域。

<div class="contain-background"></div>

.contain-background { 
width: 100vw; 
height: 100vh; 
background-image: url('image.jpg'); 
background-size: contain; 
background-position: center; 
background-repeat: no-repeat; 
}

解释

• background-size: contain; 使得图片尽可能小地缩放以保持完全可见。这种方式适用于希望完整显示图片，而不是裁剪掉内容的场景。

3. 使用 background-attachment: fixed; 实现固定背景效果

如果你希望背景在滚动时保持固定不变，可以使用 background-attachment: fixed;，实现类似“视差滚动”的效果。

<div class="fixed-background"></div>
.fixed-background { 
width: 100%; 
height: 100vh; 
background-image: url('image.jpg'); 
background-size: cover; 
background-attachment: fixed; 
background-position: center; 
}

解释

• background-attachment: fixed; 固定背景使其在滚动时不动。常用于创造视觉差效果的网页设计中。
• 注意在移动端可能会有兼容性问题，需视需求小心使用。

结论

通过本文的讲解，我们学习了如何使用不同的 CSS 属性让背景图片铺满容器，包括常见的 background-size: cover; 和 background-size: contain;  等方法。在不同场景下选择合适的方案可以让页面设计更加灵活和美观。