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个屏幕：

此屏幕显示没有鼠标悬停的原始图像：https://s22.postimg.org/xrsohlcw1/without_mouse_over.jpg 在第一张图片上，您会看到一个我不知道的灰色背景
第二个图像是鼠标悬停效果：灰色图像根据叠加效果旋转，仅显示在右上角：/ 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>

CSS叠加效果会干扰图像上的CSS文本

2 个答案: