css 3张图片作为div的背景

euoag5mw 于 2023-06-07 发布在其他

关注(0)|答案(3)|浏览(158)

我有个大问题我试图把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

css

来源：https://stackoverflow.com/questions/39704082/3-images-as-divs-background

3条答案

按热度按时间

osh3o9ms1#

如果所有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>

赞(0）回复(0）举报 2023-06-07

qgelzfjb2#

.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
我希望它能帮助你。

赞(0）回复(0）举报 2023-06-07

smdncfj33#

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

.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;
    }

赞(0）回复(0）举报 2023-06-07

我来回答

css 3张图片作为div的背景

3条答案

相关问题

热门标签

最新问答