在透明覆蓋層中顯示文本

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>