div 对齐和不透明度的问题

Question

我正在尝试制作一个带有链接的框，该框具有低不透明度的背景和两个具有不同项目的div。我已经尝试了所有方法，但我似乎无法将它们正确对齐。这是我想要实现的目标，以及我的代码。 这是我想做的形象。
这是代码。https://jsfiddle.net/hmelluso/b3f2m2tb/

Answer 1

主要是这个标签<div class="redfooterh">在类名后面缺少引号：CC_3

还有一些其他设置要微调，请参阅此处：

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>