如何使用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 参数，以逐步调整添加的图像大小在您的示例中，每个 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设置四个不同的背景图片？

How Can I Set Four Different Background images using CSS?

html

grid

background

flexbox