html - 兄弟元素继承了不透明度？

我现在正在一个网站上工作，在该网站上必须有一些图像，这些图像经过悬停，变暗并显示一些文本（价格，商品名称等）。所以我有一个包装器，然后一个图像本身和一个覆盖文本。 image div和overlay div是包装器的子级。

包装器的位置为：相对，图像和覆层的位置为：绝对。图像div的z索引为10，叠加层的z索引为0。悬停时，图像会变暗为50％的不透明度，并且文本会像应有的那样出现。除了...无论文本与图像接触的位置如何，它都具有50％的不透明度。图像外的文本具有正常的不透明度。

如何使所有文本的不透明度为1？

HTML：

  <section class="first-section">
          <div class="outfitcontainer">
            <div class="outfit">
              <img src="purelyoutfit1.png" width="100%" height="100%"/>
            </div>
            <div class="overlay">
              <p class="price">$350<s> $4200</s></p>
              <p class="item">FURR COAT</p>
              <p class="designer">Antonio Marras</p>
            </div>
          </div>
        </section>

CSS：

.first-section {
  width: 80%;
  margin-left: 10%;
  background-color: #FFFFFF;
  height: auto;
}

.outfitcontainer {
  position: relative;
  float: left;
  width: 20%;
  height: auto;
  background-color: #FFFFFF;
  margin: 25px;

}
.outfit, .overlay {
  position: absolute;
  width: 200px;
  height: auto;
  top: 0;
  left: 0;
}

.outfit {
  z-index: 10;
  background-color: white;
}
.outfit:hover {
  opacity: .5;
  cursor: pointer;
}
.overlay {
  z-index: 0;
  text-align: center;
  font-weight: bold;
}
.overlay p {
  display: block;
  padding: 30px 0;
  color: black;
}

最佳答案

最简单的方法是不使图像不透明，而使覆盖层为您创建不透明性。如果为叠加层提供不透明的背景（使用css或png图像），则可以完全实现所需的效果。

进行一些代码修改将有助于解决问题。

的HTML

<section class="first-section">
    <div class="outfitcontainer">
        <div class="overlay">
            <div class="text">
                <p class="price">$350<s> $4200</s></p>
                <p class="item">FURR COAT</p>
                <p class="designer">Antonio Marras</p>
            </div>
        </div>
        <img src="http://i.imgur.com/hDLwTh8.gif" width="100%" height="100%"/>
    </div>
</section>

的CSS

.first-section {
    width: 80%;
    margin-left: 10%;
    background-color: #FFFFFF;
    height: auto;
}

.outfitcontainer {
    position: relative;
    float: left;
    width: 20%;
    height: auto;
    background-color: #FFFFFF;
    margin: 25px;

}
.outfit, .overlay {
    position: absolute;
    width: 200px;
    height: auto;
    top: 0;
    left: 0;
}

.overlay {
    height: 400px;
    display: none;
    background: rgba(255, 255, 255, 0.5);
    text-align: center;
    font-weight: bold;
}
.overlay p {
    display: block;
    padding: 30px 0;
    color: black;
}
img {
    width: 200px;
    position: absolute;
    height: 400px;
}
.outfitcontainer:hover > .overlay {
    display: block;
}

.outfit {
    z-index: 10;
    background-color: white;
}
.outfit:hover {
    cursor: pointer;
}

关于html - 兄弟元素继承了不透明度？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26722634/