Question

我想做的是创建一个图像悬停效果，当您将鼠标悬停在图像上时，覆盖层是不透明的，其上是普通文本。现在，文本和背景是不透明的。

我已经尝试了很多方法，从z-index到使用CSS更改文本的不透明度，但是似乎没有任何解决方法。

.text {
  color: white;
  font-size: 20px;
  position: relative;
  width: 425px;
  height: 300px;
  overflow: scroll;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 1.0;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #000000;
  z-index: -3.0;
}

.container:hover .overlay {
  opacity: .5;
}

<div class="container">
  <img src="http://oi63.tinypic.com/141obo6.jpg" alt="dog" class="image">
  <div class="overlay">
    <div class="text">
      <h3>．：．Ａｐｐｅａｒａｎｃｅ．：．</h3>
    </div>
  </div>
</div>

Answer 1

问题出在属性opacity中。如果为元素分配不透明度值，则该值也将应用于该元素内的所有子元素，在这种情况下，还适用于.text和h3。

您可以通过使用rgba()作为.overlay的背景色并调整其中的不透明度来解决此问题，因此它仅适用于该元素。

这里是JSFiddle demo。

body, html {
  height: 100%;
  width: 100%;
  margin: 0;
  /* background: #20262E; */
}

.text {
  color: white;
  font-size: 20px;
  position: relative;
  width: 425px;
  height: 300px;
  overflow: scroll;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 0;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transition: .5s ease;
  background-color: rgba(0, 0, 0, 0);
  z-index: -3.0;
}

.container:hover .overlay {
  background-color: rgba(0, 0, 0, .5);
}

.container:hover .text {
  opacity: 1;
}

<div class="container">
  <img src="http://oi63.tinypic.com/141obo6.jpg" alt="dog" class="image">
  <div class="overlay">
    <div class="text">
      <h3>．：．Ａｐｐｅａｒａｎｃｅ．：．</h3>
    </div>
  </div>
</div>

不透明文字的图像悬停叠加

1 个答案: