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的容器。 要刪除底部的間隙，請使用img display: 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

你實際上可以把你的img和你的<h2>放在一個<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>