在网页设计中，背景图片常常是必不可少的元素。但是有时候由于图片尺寸和容器宽度的不匹配，导致图片显示不完整。这时我们就需要使用CSS来解决这个问题。
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
这段代码会将图片填满容器，但是有可能会把图片裁剪掉一部分。如果我们需要完整地显示背景图片，可以使用以下代码：
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
这段代码会在保持图片宽高比的前提下，将图片缩小或放大至恰好完整显示在容器中。
如果我们将背景图片设置为固定位置并让容器滚动，也需要保证图片完整显示：
background-image: url('image.jpg');
background-repeat: no-repeat;
background-size: contain;
background-attachment: fixed;
background-position: center;
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
