Question

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

 <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>

我想在我的教育部分后面添加四张不同的背景图像，但是我的代码只添加了一张图像四次。

Answer 1

您可以在每个逗号声明的末尾插入逗号，由于第一个逗号之后的声明会自动读取,no-repeat fixed,的值，而不是将那些属性附加到期望它们，它会正常出错并停在第一张图像上。

下一个问题是，如果您确实希望它们按照我想的方式显示为已连接，则需要在图像声明中指定X background-position参数，并逐步执行添加的图像大小。您的示例各有一个很好的一致200px，以提供容器左侧的边距。请参阅示例以获取更多详细信息，希望这对您有所帮助！

.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 left, 
      url(https://picsum.photos/200/300?random2) no-repeat 200px, 
      url(https://picsum.photos/200/300?random3) no-repeat 400px, 
      url(https://picsum.photos/200/300?random4) no-repeat 600px;
    background-size: contain;
    
}

<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>

如何使用CSS设置四个不同的背景图像？

1 个答案: