爲什麼我的頁腳背景設置爲position時會失去RGBA透明度：static？

我正在嘗試設置頁腳元素的樣式，以便使用RGBA顏色使背景透明。當元素設置爲position: absolute透明度可以正常工作，但設置爲position: static時，透明度會丟失。爲什麼我的頁腳背景設置爲position時會失去RGBA透明度：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%; 
}

來源

2016-10-05 asharoo85

一個簡短的建議 - 如果你在你的問題中提供了一個小提琴的鏈接，你更有可能吸引響應者 – blubberbo

不影響RGBA transparancy，看着這個代碼的位置： 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>

將位置設置爲靜態時，您確定底下元素的背景不是白色嗎？

來源

2016-10-05 22:59:14 Ben

爲什麼我的頁腳背景設置爲position時會失去RGBA透明度：static？

回答

相關問題