为什么我的页脚背景在设置为 position:static 时会失去 RGBA 透明度？答案

【问题标题】：Why does my footer background lose RGBA transparency when set to position:static?为什么我的页脚背景在设置为 position:static 时会失去 RGBA 透明度？
【发布时间】：2017-02-14 10:55:07
【问题描述】：

我正在尝试设置页脚元素的样式，以便使用 RGBA 颜色使背景透明。当元素设置为position: absolute 时，透明度可以正常工作，但是当设置为position: static 时，透明度会丢失。

我已尝试定位 .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%;
}

【问题讨论】：

一个简短的建议 - 如果您在问题中提供指向小提琴的链接，您更有可能吸引响应者

标签： css position transparency footer rgba

【解决方案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>

确定将位置设置为静态时，下方元素的背景不是白色吗？

【讨论】：