我有个大问题。 我试图把3个图像作为一个div背景。一切都很好，但我不能强迫他们覆盖div。当它们相邻时，它们之间有一个间隙。css背景-大小:封面，封面，封面；不起作用。如何让这3个图像覆盖整个div，并且它们之间没有任何间隙？

<div id="top_part">
    <div class="row">
        <div id="advert">
            <h1><span>Advertise something here</span></h1>
        </div>
    </div>
    <div class="row">
        <ul>
            <li>one</li>
            <li>two</li>
            <li>three</li>
        </ul>
    </div>
</div>

和css

#advert {
    border-color: rgb(254, 46, 49);
    border-width: 5px;
    background-image: url(images/image1.jpg), url(images/image2.jpg), url(images/image3.jpg);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: left, center, right;
    background-size: 400px 400px, 400px 400px, 400px 400px;
    height: 400px;
    width: 1200px;
}

我设法做到这一点，只有一个静态的大小，我将不得不使用移动友好的媒体查询....

小提琴上的链接

如果所有3张图片都有相同的尺寸，那么你可以使用每张图片宽度的33%和中间图片的34%。所以它看起来像背景大小:33% 100%，34% 100%，33% 100%；。

这里我举了一个例子说明我的意思。希望这个能帮到你。

#advert {
  background-color: red;
  background-image: url(https://placehold.it/150x200/00ff00), url(https://placehold.it/250x200/00ffff), url(https://placehold.it/350x200/0000ff);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left, center, right;
  background-size: 33% 100%, 34% 100%, 33% 100%;
  height: 200px;
  width: 600px;
}

<div id="advert"></div>

https://jsfiddle.net/razia/89jvnLbq/

请查看此链接:-http://www . corelangs . com/CSS/box/center-div . html

希望对你有帮助。

请考虑这一点，如果需要优先重复中间图像，必须将其写在左边图像之前:

.toolbar {
      background-image: url("../../../assets/images/chrome-bar-left.png"),
        url("../../../assets/images/chrome-bar-right2.png"),
        url("../../../assets/images/chrome-bar-center.png");
      background-size: auto 50px, auto 50px, auto 50px;
      background-position:  left, right, center ;
      height: 50px;
      background-repeat: no-repeat, no-repeat, repeat;
    }