Question

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

Answer 1

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

您可以只使用相对背景div来制作不透明背景。

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

Answer 2

主要是此标记<div class="redfooterh>在类名后面缺少引号：<div class="redfooterh">

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

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

div对齐和不透明度的问题

2 个答案: