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>