css中让背景图片完整显示不全

CSS中，背景图片往往是用来作为网页美化的一种手段。但是我们常常遇到一个问题，在某些特定情况下需要将背景图片完整显示，但是却只有部分显示出来了。这种情况下，我们可以使用CSS的一些技巧来让背景图片完整显示。

一般来说，在CSS中设置背景图片是这样的：

div {
    background-image: url('image.jpg');
}

这里的 'image.jpg' 是我们要设置的背景图片。但是，如果我们只设置这一个属性，有时候图片并不会完整显示。这是因为默认情况下，背景图片是会被缩放以适应元素的大小的。

要让背景图片完整显示，我们有几种方法：

1、背景图片不重复

div {
    background-image: url('image.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

这种方法通过 background-size 属性将背景图片的大小设置为和包含元素的大小一致。这样图片就不会被缩放。同时，通过 background-repeat: no-repeat ，背景图片也就不会重复。

2、背景图片重复

div {
    background-image: url('image.jpg');
    background-size: contain;
    background-repeat: repeat;
}

如果允许背景图片重复，我们可以使用 background-size: contain 。这个属性会使得背景图片在包含元素中保持原来的比例，并让图片的尺寸缩小以适应包含元素的大小。同时，通过 background-repeat: repeat ，背景图片就可以重复显示了。

以上两种方法都能让背景图片完整显示。选择哪一种方法，取决于实际需要以及图片的大小和比例。