css 背景图片全部显示

在使用 CSS 设计页面的过程中，使用背景图片是非常常见的。但有时候会遇到背景图片只显示一部分的情况，这会影响页面的美观度和用户的体验。要解决这个问题，我们可以通过以下两种方法来实现背景图片全部显示。

background-size: cover;
    

使用background-size: cover; 可以让背景图片完整地覆盖整个容器元素，并保持图片的原始宽高比例。

例如：

.background-img {
    background-image: url('example.jpg');
    background-size: cover;
    background-position: center;
}
    

这段 CSS 代码会将.background-img元素的背景图片显示全屏，而且可以保持图片的原始宽高比例。

background-size: contain;
    

使用background-size: contain; 可以让背景图片完整地显示，并保持图片的原始宽高比例，但是并不能完全覆盖整个容器元素。此时，背景图片会在元素内垂直或水平方向上居中。

例如：

.background-img {
    background-image: url('example.jpg');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
    

这段 CSS 代码会在.background-img元素内居中显示整张图片。

无论什么方法，只要在 CSS 中添加上相应的属性就能够完整地显示所有背景图片，这样可以让我们的网站看起来更加美观、大气。希望这篇文章对你有帮助！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！