css如何让图片不重复显示

在前端开发中，我们经常需要对页面进行美化和布局，其中图片是不可或缺的元素。但有时候我们需要在页面上将同一张图片多次使用，为了不让重复出现的图片显得单调，我们需要学会使用CSS来让图片不重复显示。

     .bg-image {
         background-image: url("example.jpg");
         background-repeat: no-repeat;
         background-size: cover;
     }

在上面的代码中，我们给一个类名为“bg-image”的元素设置了一个背景图片，通过设置background-repeat为"no-repeat"，就可以让这张图片不会在元素中被重复显示。同时，为了让图片的显示效果更加完整，我们还可以设置background-size为"cover"，让图片自适应元素的大小从而不会有裁剪或变形的情况出现。

除了使用background-repeat和background-size来实现这个效果，我们还可以使用CSS的另一个属性——background-position来控制图片的显示位置。通过指定background-position的属性值，我们可以让图片在背景中显示不同的位置，达到更好的展示效果。

     .bg-image {
         background-image: url("example.jpg");
         background-repeat: no-repeat;
         background-size: cover;
         background-position: center;
     }

在上面的代码中，我们将background-position的属性值设置为"center"，让图片始终处于元素的中心位置。

在开发中，如果有多个需要显示同一张图片的元素，我们可以为它们创建一个共用的类名，在该类名下设置上述样式即可实现让图片只显示一次的效果。

     .bg-image {
         background-image: url("example.jpg");
         background-repeat: no-repeat;
         background-size: cover;
         background-position: center;
     }
    
     .Box1,.Box2,.Box3 {
         width: 300px;
         height: 200px;
     }
    
     .Box1 {
         background-color: red;
     }
     .Box2 {
         background-color: blue;
     }
     .Box3 {
         background-color: green;
     }

在上面的代码中，我们为三个具有不同背景颜色的元素设置了同一个类名"bg-image"，实现了三个不同背景色的元素共用同一张图片的效果。

CSS的这些属性能够让我们在开发的过程中，更加灵活和自由地使用同一张图来让不同元素更具美感和形态感。学好这些技巧，可以让你在前端开发领域中更具竞争力。