위치로 설정하면 내 바닥 글 배경이 RGBA 투명도를 잃게되는 이유는 무엇입니까?

배경이 RGBA 색상을 사용하여 투명하도록 바닥 글 요소의 스타일을 지정하려고합니다. 요소가 position: absolute으로 설정되면 투명도는 정상적으로 작동하지만 position: static으로 설정하면 투명도가 손실됩니다.위치로 설정하면 내 바닥 글 배경이 RGBA 투명도를 잃게되는 이유는 무엇입니까?

과 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의, 투명성에 영향을 미치지 않는 위치 : 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

위치로 설정하면 내 바닥 글 배경이 RGBA 투명도를 잃게되는 이유는 무엇입니까?

답변

관련 문제