css引过来背景图不重复

CSS中背景图的使用非常普遍，可以将图片作为背景来美化页面。但是有时候我们并不希望重复使用同一张图片，那么该怎么办呢？下面是一种CSS引入背景图不重复的解决方案。

.background {
        background-image:url("image.jpg");
     /*引入背景图像*/    background-repeat:no-repeat;
     /*禁止背景图像重复*/    background-size:cover;
 /*将背景图像缩放到容器尺寸*/}

这段CSS代码中，我们使用了background-repeat属性来禁止背景图像的重复，这样就可以防止同一张图片重复出现在页面上。同时，我们使用了background-size属性将背景图像缩放到容器的尺寸，这样可以保证图像完全覆盖容器。

另外，如果你想在页面中使用不同的背景图像，也可以在CSS中使用多个类来分别引入不同的背景图片。例如：

.background1 {
        background-image:url("image1.jpg");
        background-repeat:no-repeat;
        background-size:cover;
}
.background2 {
        background-image:url("image2.jpg");
        background-repeat:no-repeat;
        background-size:cover;
}
    

这样，在使用时只需要将相应的类应用到HTML元素的class属性中即可：

div class="background1">
        p>
    这是一个使用了图片1的背景的div/p>
    /div>
    div class="background2">
        p>
    这是一个使用了图片2的背景的div/p>
    /div>
    

在CSS中使用类来引入不同的背景图片，可以使页面的效果更加丰富多彩，而且不会出现重复显示同一张图片的情况。

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