CSS疊加效果影響圖像上的CSS文本

Question

我需要使用CSS在圖像上顯示文本。我這樣做，使用H2標籤：

<h2 class="post-message">Test</h2> 

這裏是CSS代碼：

.post-message { 
    position: absolute; 
    bottom: 10px; 
    left: 10px; 
    background: rgba(0, 0, 0, 0.75); 
    padding: 4px 8px; 
    color: white; 
    margin: 0; 
    font: 14px Sans-Serif; 
} 

但疊加效應是搞亂的東西了，這裏是代碼：

.overlay{ 
    overflow: hidden; 
    background: #000; 
} 

.overlay img{ 
-webkit-transition: -webkit-transform .3s ease-out; 
    -moz-transition: -moz-transform .3s ease-out; 
    -o-transition: -o-transform .3s ease-out; 
    transition: transform .3s ease-out; 
} 

.overlay:hover img{ 
    -webkit-transform: scale(1.2) rotate(-5deg); 
    -moz-transform: scale(1.2) rotate(-5deg); 
    -o-transform: scale(1.2) rotate(-5deg); 
    -ms-transform: scale(1.2) rotate(-5deg); 
    transform: scale(1.2) rotate(-5deg); 
    opacity: 0.7; 
} 

我不知道如何解釋發生了什麼，我上傳了2個屏幕：

1. 此屏幕顯示沒有鼠標懸停的原始圖像：https://s22.postimg.org/xrsohlcw1/without_mouse_over.jpg 在第一張圖像上，您會看到一個灰色背景，我不知道從哪裏來
2. 第二個圖像是鼠標懸停效果：該灰色圖像根據疊加效應並顯示僅在右上角：/ https://s22.postimg.org/a13x0ndmp/gra_color_disappears.jpg

一個紅色的小箭頭會告訴你第二圖像上會發生什麼。幫助會很棒！我嘗試了所有我知道的事情，專家意見總是最好的解決方案。提前致謝！

<div class="post-thumbnail overlay"> 
    <a href="http://example.com/comey-wikileaks/">  
     <img src="http://example.com/wp-content/uploads/2017/04/comey-825x510.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" width="825" height="510">  
    </a>  
    <h2 class="post-message">Test</h2> 
</div> 

Answer 1

一種img具有「替換內容」的佈局模型和基本上當作內聯元件，和包括在底部由默認字符底部部分的空間，所以就會出現之間的小空間img的底部和img的容器底部。要刪除底部的空隙，請使用imgdisplay: block或使用vertical-align: top。

如果圖像旋轉至目前爲止您可以看到底部/右角的角落，請增加您的scale()或者不要旋轉太多，直到您再也看不到爲止。我沒有看到你提供的代碼。

.post-message { 
 
    position: absolute; 
 
    bottom: 10px; 
 
    left: 10px; 
 
    background: rgba(0, 0, 0, 0.75); 
 
    padding: 4px 8px; 
 
    color: white; 
 
    margin: 0; 
 
    font: 14px Sans-Serif; 
 
} 
 
    
 
.overlay { 
 
    overflow: hidden; 
 
    background: #000; 
 
} 
 
    
 
.overlay img { 
 
    -webkit-transition: -webkit-transform .3s ease-out; 
 
    -moz-transition: -moz-transform .3s ease-out; 
 
    -o-transition: -o-transform .3s ease-out; 
 
    transition: transform .3s ease-out; 
 
} 
 
    
 
.overlay:hover img { 
 
    -webkit-transform: scale(1.2) rotate(-5deg); 
 
    -moz-transform: scale(1.2) rotate(-5deg); 
 
    -o-transform: scale(1.2) rotate(-5deg); 
 
    -ms-transform: scale(1.2) rotate(-5deg); 
 
    transform: scale(1.2) rotate(-5deg); 
 
    opacity: 0.7; 
 
} 
 
    
 
img { 
 
    vertical-align: top; 
 
}

<div class="post-thumbnail overlay"> 
 
    <a href="http://example.com/comey-wikileaks/"> 
 
    <img src="http://kenwheeler.github.io/slick/img/fonz1.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" width="825" height="510"> 
 
    </a> 
 
    <h2 class="post-message">Test</h2> 
 
</div>

Answer 2

其實你可以跟你的<h2>把你img一起<div>內，讓整個<div>旋轉....

這裏是你寫的實例基礎：

（很明顯，有幾件事要重新調整，但它或多或少是你想要的，我猜^^）

.post-message { 
 
    position: absolute; 
 
    bottom: 10px; 
 
    left: 10px; 
 
    background: rgba(0, 0, 0, 0.75); 
 
    padding: 4px 8px; 
 
    color: white; 
 
    margin: 0; 
 
    font: 14px Sans-Serif; 
 
} 
 

 
.overlay{ 
 
    overflow: hidden; 
 
    background: #000; 
 
    
 
    /*these two lines are new*/ 
 
    display:inline-block; 
 
    position:relative; 
 
} 
 

 
/*I apply style directly on the "overlay"*/ 
 
.overlay /*img*/{ 
 
-webkit-transition: -webkit-transform .3s ease-out; 
 
    -moz-transition: -moz-transform .3s ease-out; 
 
     -o-transition:  -o-transform .3s ease-out; 
 
     transition:   transform .3s ease-out; 
 
} 
 

 
.overlay:hover /*img*/{ 
 
    -webkit-transform: scale(1.2) rotate(-5deg); 
 
     -moz-transform: scale(1.2) rotate(-5deg); 
 
     -o-transform: scale(1.2) rotate(-5deg); 
 
     -ms-transform: scale(1.2) rotate(-5deg); 
 
      transform: scale(1.2) rotate(-5deg); 
 
      
 
    opacity: 0.7; 
 
}

<span class="overlay"> 
 
    <img src="https://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg" /> 
 
    <h2 class="post-message">Test</h2> 
 
</span>