HTML

Question

我现在在一个网站上工作，我必须有一些图像，在悬停，暗淡和显示一些文本（价格，项目名称等）。所以我有一个包装器，然后是一个用于图像本身和一个用于叠加文本。图像div和overlay div是包装器的子项。

包装器的位置为：relative，图像和叠加层的位置为：absolute。图像div的z-index为10，覆盖的z-index为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;
}

Answer 1

最简单的方法是不使图像不透明，但让叠加为您创建不透明度。如果您为叠加层提供不透明的背景（使用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;
}

Answer 2

试试这个：

.yourClass > *{

  opacity:1;

}.yourClass > *:hover{

  opacity:1;

}

兄弟元素继承不透明度？

2 个答案:

HTML

CSS

祝你好运！