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

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 参数，并逐步完成示例中添加的图像大小是一个很好的一致的 200 像素，每个都提供容器左侧的边距。有关更多详细信息，请参见示例，希望对您有所帮助，干杯！

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