显示透明覆盖层内的文本

Question

我有一张图像，点击时将其设置为透明，因此它会显示背景，从而产生叠加的错觉。我还想在背景中央显示一些文字，这样当背景显示时它就会出现，该怎么做？预期的：代码笔：https://codepen.io/ogonzales/pen/yLJGzYr代码：$('.tricky').click(function(){     $('img').addClass("tricky_image"); });更新1：Codepen 网格中的多个图像https://codepen.io/ogonzales/pen/qBNLLoW

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属性，现在用于隐藏文本直到需要为止。如果这对您有用，请在评论中告诉我。texttext

$('.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>