Question

我正在尝试设置页脚元素的样式，以便使用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%;
}

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

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

当设置为position：static时，为什么我的页脚背景会失去RGBA透明度？

1 个答案: