[分享]css中如何让图片不重复显示不出来

在CSS中，background属性用于定义元素的背景样式，包括颜色和图片等。有时我们会遇到重复显示或者图片无法正常显示的情况，这时我们可以使用backgroundrepeat和backgrounds...

在CSS中，background属性用于定义元素的背景样式，包括颜色和图片等。有时我们会遇到重复显示或者图片无法正常显示的情况，这时我们可以使用background-repeat和background-size属性来进行调整。

background-repeat属性可以用来控制背景图片是否重复显示，通常有以下几种取值：

background-repeat: repeat;  /* 默认值，背景图片在水平和垂直方向重复显示 */
background-repeat: no-repeat;  /* 背景图片只显示一次 */
background-repeat: repeat-x;  /* 背景图片在水平方向重复显示 */
background-repeat: repeat-y;  /* 背景图片在垂直方向重复显示 */ 

如果我们不想让背景图片重复，在CSS中可以这样写：

background-repeat: no-repeat; 

此时，背景图片只会显示一次，如果图片大小超过了元素的大小，那么只会显示部分图片。

除了重复显示的问题，还会有图片显示不全的情况。这时可以使用background-size属性来进行调整。background-size属性可以用来控制背景图片的大小，有以下几种取值：

background-size: auto;   /* 默认值，背景图片大小不变，显示完整的图片 */
background-size: cover;  /* 图片等比缩放，将元素完全覆盖 */
background-size: contain;  /* 图片等比缩放，完整显示在元素内 */
background-size: 50% 50%;  /* 背景图片大小为元素的50% */
background-size: 100px 200px;  /* 背景图片大小为100px * 200px */ 

我们可以根据需要进行调整，通常情况下使用cover或contain即可。

在使用background属性时，我们可以将以上两个属性写在一起：

background: url('path/to/image.jpg') no-repeat center center / cover; 

这样可以更加简洁地实现背景图片样式的设置。