div對齊和不透明度的問題

Question

我試圖製作一個帶有低透明度背景和兩個不同項目的背景的鏈接。我嘗試了所有的方法，但我似乎無法讓它們正確對齊。這是我想要實現的，以及我的代碼。
這是代碼。 https://jsfiddle.net/hmelluso/b3f2m2tb/

Answer 1

主要是這個標籤<div class="redfooterh>是缺少類名後的報價：<div class="redfooterh">

和其他一些設置進行微調，在這裏看到：

https://jsfiddle.net/4son84j9/2/

Answer 2

https://jsfiddle.net/b3f2m2tb/3/

你可以只廣告相對背景div來使不透明的背景。

.redfooterw { 
 
    max-width: 70rem; 
 
    height: 7rem; 
 
    position: relative; 
 
    border: solid 1px; 
 
    display: flex; 
 
    align-items: center; /* align vertical */ 
 
    justify-content: center; 
 
    border-color: #eb1c2d; 
 
} 
 
.background{ 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #fcc; 
 
    opacity: 0.2 
 
} 
 
.inficon{ 
 
    width: 20%; 
 
    z-index: 5; 
 
    text-align: center; 
 
    font-size: 30px; 
 
    padding-bottom: 1%; 
 
} 
 
.footerlink{ 
 
    text-align: left; 
 
    width:80%; 
 
    font-size: 20px; 
 
    padding-bottom: 1%; 
 
}

<div class="redfooterw"> 
 
    <div class="background"> 
 
    </div> 
 
     <div class="inficon"> &#128712; 
 
     </div> 
 
     <div class="footerlink "> 
 
     <a href="# " target="_blank ">Para mayor información sobre este producto clic aquí.</a> 
 
     </div> 
 
</div>