显示透明覆盖层内的文本

Question

我有一张图像，点击时将其设置为透明，因此它会显示背景，从而产生叠加的错觉。

我还想在背景中央显示一些文字，这样当背景显示时它就会出现，该怎么做？

预期的：

代码笔：

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

代码：

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

更新1：

Codepen 网格中的多个图像

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

Answer 1

这应该有效。如果您有任何疑问，请告诉我。如果您想更好地匹配参考图像，您还可以添加边框。&nbsp; $('.imageDiv').click(function(){&nbsp; &nbsp; $('img').addClass("tricky_image");&nbsp; &nbsp; $(".text").css("display", "inline");});.imageContainer {&nbsp; position: relative;&nbsp; text-align: center;&nbsp; color: black;&nbsp; max-width: 200px;&nbsp; max-height: 200px;}.tricky_image {&nbsp; -moz-transition: all 1s;&nbsp; -webkit-transition: all 1s;&nbsp; -ms-transition: all 1s;&nbsp; -o-transition: all 1s;&nbsp; transition: all 1s;&nbsp; opacity: 0.5;&nbsp; filter: alpha(opacity=20);}.text {&nbsp; display: none;&nbsp; position: absolute;&nbsp; top: 50%;&nbsp; left: 50%;&nbsp; opacity: 1;&nbsp; transform: translate(-50%, -50%);}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script><div class="imageContainer">&nbsp;&nbsp;&nbsp; <div class='imageDiv' id = 'test'>&nbsp; &nbsp; <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/08_Dota_2_140x175.jpg" />&nbsp; </div>&nbsp;&nbsp;&nbsp; <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() {&nbsp; $(this).find('img').toggleClass("tricky_image");&nbsp; $(this).find('.text').toggleClass("addText");});.grid {&nbsp; display: grid;&nbsp; grid-template-columns: repeat(4, 1fr);&nbsp; justify-items: center;&nbsp; align-items: center;&nbsp; grid-gap: 15px;}.flip-card {&nbsp; border-style: hidden;&nbsp; background-color: transparent;&nbsp; width: 120px;&nbsp; height: 120px;&nbsp; perspective: 1000px;}.flip-card-inner {&nbsp; position: relative;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; text-align: center;&nbsp; transition: transform 0.6s;&nbsp; transform-style: preserve-3d;&nbsp; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);}.flip-card:hover .flip-card-inner {&nbsp; transform: rotateY(180deg);}.flip-card-front,.flip-card-back {&nbsp; position: absolute;&nbsp; width: 100%;&nbsp; height: 100%;&nbsp; backface-visibility: hidden;}.flip-card-front {&nbsp; background-color: #bbb;&nbsp; color: black;}.flip-card-back {&nbsp; background-color: #222e36ef;&nbsp; color: white;&nbsp; transform: rotateY(180deg);}/* background overlay - text */.imageContainer {&nbsp; position: relative;&nbsp; text-align: center;&nbsp; color: black;&nbsp; max-width: 200px;&nbsp; max-height: 200px;}.tricky_image {&nbsp; -moz-transition: all 1s;&nbsp; -webkit-transition: all 1s;&nbsp; -ms-transition: all 1s;&nbsp; -o-transition: all 1s;&nbsp; transition: all 1s;&nbsp; opacity: 0.5;&nbsp; filter: alpha(opacity=20);}.text {&nbsp;display: none;}.addText{&nbsp; display: inline;&nbsp; position: absolute;&nbsp; top: 50%;&nbsp; left: 50%;&nbsp; opacity: 1;&nbsp; transform: translate(-50%, -50%);}@media(max-width: 768px) {&nbsp; .grid {&nbsp; &nbsp; grid-template-columns: repeat(3, 1fr);&nbsp; }}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="col-md-8">&nbsp; <section id="team">&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; <div class="grid">&nbsp; &nbsp; &nbsp; &nbsp; <div class="imageContainer">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class='imageDiv' id='test'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="text">text here</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="imageContainer">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class='imageDiv' id='test'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="text">text here</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="imageContainer">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class='imageDiv' id='test'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="text">text here</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="imageContainer">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class='imageDiv' id='test'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="text">text here</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="imageContainer">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class='imageDiv' id='test'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="text">text here</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="imageContainer">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class='imageDiv' id='test'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="text">text here</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="imageContainer">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class='imageDiv' id='test'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="text">text here</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="imageContainer">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class='imageDiv' id='test'>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="https://cdn.shopify.com/s/files/1/0408/5792/7834/files/06_Counter_Strike_GO_140x175.jpg" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="text">text here</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </section></div>