html - 如何阻止我的背景图像相互重叠

Question

我希望背景图像并排显示(大小相等)，它们之间没有空格。我的代码执行了此操作，但图像相互重叠了一点，因此无法跨越 100% 的容器。

我将 background-size 设置为 25% 100%;，但是图像重叠了一点，我不希望它们重叠。我希望它们大小相同并并排显示，它们之间没有间距。

    .education {
        background: linear-gradient(rgba(141, 153, 174, 0.8), rgba(141, 153, 174, 0.5)),
        url(https://picsum.photos/200/300?random1)  no-repeat fixed, url(https://picsum.photos/200/300?random2) no-repeat fixed, url(https://picsum.photos/200/300?random3) no-repeat fixed, url(https://picsum.photos/200/300?random4) no-repeat fixed;
        background-size: 25% 100%;
        background-position: 0% 0%, 25% 0%, 50% 0%, 75% 0%;
    }

<section id="education" class="education">
                <div class="content-wrap">
                <h2>Education</h2>https://jsfiddle.net/Temitope/61pz03hy/5/#run
    
                <!-- School details: copy this whole block to add more schools. -->
                <h3>Andela - Lagos, Nigeria</h3>
                <p>Mobile Web Specialist Certificate, 2019</p>
                <p>Five Months Learning Program. </p>
    
                <h3>University Of  Lagos - Akoka, Lagos</h3>
                <p>Bachelor of Science, 2013-2017</p>
                <p>Major in Economics and International Trade.</p>
    
                <h3>Kith and Kin International College - Ikorodu, Lagos</h3>
                <p>West African Exam Council Certificate, 2009-2013</p>
                <p> Major in Commerce.</p>
              </div>
            </section>

我希望背景图像并排显示(大小相等)，它们之间没有空格。我还希望图像根据设备宽度自行调整大小。

Answer 1

我必须将背景位置设置为:0% 0%、33.333% 0%、66.667% 0%、100% 0%；。我的水平值是错误的，它们最多只占容器的 75%。

.education {
     background: linear-gradient(rgba(141, 153, 174, 0.8), rgba(141, 153, 174, 0.5)),
     url(https://picsum.photos/200/300?random1)  no-repeat fixed, url(https://picsum.photos/200/300?random2) no-repeat fixed, url(https://picsum.photos/200/300?random3) no-repeat fixed, url(https://picsum.photos/200/300?random4) no-repeat fixed;
     background-size: 25% 100%;
     background-position:  0% 0%, 33.333% 0%, 66.667% 0%, 100% 0%;;
 }

<section id="education" class="education">
            <div class="content-wrap">
            <h2>Education</h2>

            <!-- School details: copy this whole block to add more schools. -->
            <h3>Andela - Lagos, Nigeria</h3>
            <p>Mobile Web Specialist Certificate, 2019</p>
            <p>Five Months Learning Program. </p>

            <h3>University Of  Lagos - Akoka, Lagos</h3>
            <p>Bachelor of Science, 2013-2017</p>
            <p>Major in Economics and International Trade.</p>

            <h3>Kith and Kin International College - Ikorodu, Lagos</h3>
            <p>West African Exam Council Certificate, 2009-2013</p>
            <p> Major in Commerce.</p>
          </div>
        </section>