Я пытаюсь создать элемент нижнего колонтитула, чтобы фон был прозрачным с использованием цветов RGBA. Когда элемент установлен в position: absolute
, прозрачность работает нормально, но когда установлено значение position: static
, прозрачность теряется.Почему фона нижнего колонтитула теряют прозрачность RGBA при установке в положение: статическое?
Я попытался настроить таргетинг на .footerDiv
, а также footer.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%;
}
краткое изложение совета - если вы предоставите ссылку на скрипку в своем вопросе, вы, скорее всего, соблазняете респондентов – blubberbo