在透明覆盖层中显示文本

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 class 不是它的一部分。我把它切换到('.imageContainer')可以正确遍历 DOM 以查找text ，因为它是imageContainer的子项。另外$(this).find(".text").toggleClass("display-inline");不起作用，因为display-inline是不是 class。我创建了一个名为addText的新 class，它现在包含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>