Как я могу установить четыре разных фоновых изображения с помощью CSS? - PullRequest
Новая
       21

Как я могу установить четыре разных фоновых изображения с помощью CSS?

0 голосов
/ 03 октября 2019 

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

Я хочу добавить четыре различных фоновых изображения позади моего раздела образования, но мой код добавляет только одно изображение четыре раза.

1 Ответ

0 голосов
/ 03 октября 2019

Вы вставляете запятые после конца каждого объявления запятой, которое при рендеринге нарушает порядок, так как объявление после первой запятой само читает значение только ,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>
...