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>