div 对齐和不透明度问题

Question

我正在尝试制作一个带有 link 的盒子，它具有低不透明度的背景和两个包含不同项目的 div。我已经尝试了所有方法，但似乎无法使它们正确对齐。这是我想要实现的目标，以及我的代码。 This is an image of what I want to do.
这是代码。 https://jsfiddle.net/hmelluso/b3f2m2tb/

Answer 1

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>

Answer 2

主要是这个标签 <div class="redfooterh> 缺少 class 名称后的引号：<div class="redfooterh">

以及其他一些要微调的设置，请参见此处：

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

div 对齐和不透明度问题

Problems with div alignment and opacity

html

css

positioning

alignment