Question

我有一个大问题。我试图将3张图片作为div背景。一切都很好，但我无法推动它们覆盖div。当它们彼此相邻时，它们之间存在差距。 css background-size：封面，封面，封面;不管用。如何使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;
}

我设法只使用静态大小进行此操作，我将不得不使用媒体查询进行移动友好....

链接fiddle

Answer 1

如果所有3张图片都具有相同的尺寸，则每张图片的宽度可以为33％，中心图片的宽度为34％。所以它看起来像background-size: 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>

Answer 2

.centerDiv{
     width: 60%; 
     height:200px; 
     margin: 0 auto; 
     background-color:#FFA500 ; 
     } 

.div1 { 
     width: 33%; 
     height:200px; 
     background-color:#A52A2A ; 
     float:left; 
     } 
.div2 { 
     width: 34%; 
     height:200px; 
     background-color:#FFA500 ; 
     float:left; 
     }
.div3 {
    width: 33%; 
    height:200px; 
    background-color:#008000 ; 
    float:left; 
    }

   <div class="centerDiv">
     <div class="div1">
       </div>
        <div class="div2"> 
        </div> 
        <div class="div3"> 
      </div>
     </div>

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

请检查此链接： - http://www.corelangs.com/css/box/center-div.html

我希望它会对你有所帮助。

3张图片作为div的背景

2 个答案: