javascript - 在透明叠加层中显示文本

Question

我有一张图片，我让它在点击时透明，所以它会显示背景，产生叠加的错觉。

我还想在背景中心显示一些文字，所以当背景显示时它会出现，怎么做？

预期的：

代码笔：

https://codepen.io/ogonzales/pen/yLJGzYr

代码：

$('.tricky').click(function(){
    $('img').addClass("tricky_image");
});

更新 1：

Codepen 网格中的多个图像

https://codepen.io/ogonzales/pen/qBNLLoW

标签： javascript

Answer 1

这应该有效。如果您有任何问题，请告诉我。如果您想更好地匹配参考图像，还可以添加边框。

  $('.imageDiv').click(function(){
    $('img').addClass("tricky_image");
    $(".text").css("display", "inline");
});

.imageContainer {
  position: relative;
  text-align: center;
  color: black;
  max-width: 200px;
  max-height: 200px;
}

.tricky_image {
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  opacity: 0.5;
  filter: alpha(opacity=20);
}

.text {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 1;
  transform: translate(-50%, -50%);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="imageContainer">
  
  <div class='imageDiv' id = 'test'>
    <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/08_Dota_2_140x175.jpg" />
  </div>
  
  <div class="text">text here</div>
</div>

更新的答案：

这里的关键是记住 DOM 是如何工作的。你有$('.imageDiv').click(function() {...它只会让你找到图像 div 的孩子，text该类不属于该类。我将它切换到('.imageContainer')可以正确遍历 DOM 以找到text它，因为它是imageContainer. 也$(this).find(".text").toggleClass("display-inline");不起作用，因为display-inline不是一个类。我创建了一个名为的新类addText，它现在保存text之前的属性，text现在可以在需要时隐藏文本。如果这对你有用，请在评论中告诉我。

$('.imageContainer').click(function() {
  $(this).find('img').toggleClass("tricky_image");
  $(this).find('.text').toggleClass("addText");
});

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  align-items: center;
  grid-gap: 15px;
}

.flip-card {
  border-style: hidden;
  background-color: transparent;
  width: 120px;
  height: 120px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: #222e36ef;
  color: white;
  transform: rotateY(180deg);
}


/* background overlay - text */

.imageContainer {
  position: relative;
  text-align: center;
  color: black;
  max-width: 200px;
  max-height: 200px;
}

.tricky_image {
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  opacity: 0.5;
  filter: alpha(opacity=20);
}

.text {
 display: none;
}
.addText{
  display: inline;
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 1;
  transform: translate(-50%, -50%);
}

@media(max-width: 768px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-8">

  <section id="team">
    <div class="container">
      <div class="grid">

        <div class="imageContainer">

          <div class='imageDiv' id='test'>
            <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
          </div>

          <div class="text">text here</div>
        </div>

        <div class="imageContainer">

          <div class='imageDiv' id='test'>
            <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
          </div>

          <div class="text">text here</div>
        </div>

        <div class="imageContainer">

          <div class='imageDiv' id='test'>
            <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
          </div>

          <div class="text">text here</div>
        </div>

        <div class="imageContainer">

          <div class='imageDiv' id='test'>
            <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
          </div>

          <div class="text">text here</div>
        </div>

        <div class="imageContainer">

          <div class='imageDiv' id='test'>
            <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
          </div>

          <div class="text">text here</div>
        </div>

        <div class="imageContainer">

          <div class='imageDiv' id='test'>
            <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
          </div>

          <div class="text">text here</div>
        </div>

        <div class="imageContainer">

          <div class='imageDiv' id='test'>
            <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
          </div>

          <div class="text">text here</div>
        </div>

        <div class="imageContainer">

          <div class='imageDiv' id='test'>
            <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />
          </div>

          <div class="text">text here</div>
        </div>

      </div>
    </div>
  </section>

</div>