Почему мой фон нижнего колонтитула теряет прозрачность RGBA, когда установлен в position:static?

Я пытаюсь стилизовать элемент нижнего колонтитула так, чтобы фон был прозрачным, используя цвета RGBA. Если для элемента задано position: absoluteзначение прозрачности, он работает нормально, но если задано position: staticзначение прозрачности, он теряется.

Я пытался прицелиться.footerDivfooter.footerDiv, а также попытался установить белый прозрачный фон, но ничего не получилось.

Я использую Zurb Foundation 6 в качестве основы. Я исследовал и попробовал некоторые различные скрипки, но безрезультатно. Любая помощь была бы очень признательна, так как мне нужно, чтобы нижний колонтитул оставался статичным, чтобы оставаться отзывчивым для различных размеров экрана. Спасибо заранее.

HTML:

<footer class="footerDiv">
    <div class="row" data-equalizer data-equalize-on="medium">
         <div class="small-12 medium-4 large-4 columns text-center col1" data-equalizer-watch>
            <img class="jamboHealth" src="../assets/img/assetLogos/health.svg" alt="Jambo Health Logo">
            <img class="jamboConstruct" src="../assets/img/assetLogos/construction.svg" alt="Jambo Construction Logo">
            <img class="jamboDigi" src="../assets/img/assetLogos/digital.svg" alt="Jambo Digital Logo">
            <p class="text-center">0845 424 9753</p>
            <div class="divideAlign">
            </div>
          </div>
        <!--col1-->

        <div class="small-12 medium-4 large-4 columns text-center col2" data-equalizer-watch>
           <img class="jamboEdu" src="../assets/img/assetLogos/education.svg" alt="Jambo Education Logo">
           <img class="jamboManu" src="../assets/img/assetLogos/manufacturing.svg" alt="Jambo Manufacturing Logo">
           <p class="text-center">01872 22 33 66</p>
           <div class="divider">
           </div>
        </div>
        <!--col2-->

        <div class="small-12 medium-4 large-4 columns text-center col3" data-equalizer-watch>
           <img class="jamboInt" src="../assets/img/assetLogos/international.svg" alt="Jambo International Logo">
           <p class="text-center">+44161 393 708</p>
           <div class="divider">
           </div>
        </div>
        <!--col3-->
    </div>
    <!--row-->
</footer>

стиль CSS:

footer {
background: rgba(255,255,255,0.7);
position: static;
bottom: 0;
padding-top: 1rem;
width: 100%;
}

1 ответ

  1. Позиция не влияет на прозрачность RGBA, глядя на этот код:
    https://jsfiddle.net/y8hwqq2m/3/

    body {
      background-color: red;
    }
    footer {
      background: rgba(255, 255, 255, 0.7);
      bottom: 0;
      padding-top: 1rem;
      width: 100%;
    }
    .footerDiv {
      position: absolute;
    }
    .footerDiv2 {
      position: static;
    }
    <footer class="footerDiv">
      <div class="row" data-equalizer data-equalize-on="medium">
        <div class="small-12 medium-4 large-4 columns text-center col1" data-equalizer-watch>
          Some content positioned: absolute;
        </div>
      </div>
    </footer>
    <footer class="footerDiv2">
      <div class="row" data-equalizer data-equalize-on="medium">
        <div class="small-12 medium-4 large-4 columns text-center col1" data-equalizer-watch>
          Some content positioned: static;
        </div>
      </div>
    </footer>

    Вы уверены, что фон элемента под не белый при установке положения в статический?