时间戳

首页 > 解决方案 > 裁剪的图片库不允许 div 覆盖在图片上显示文本

html - 裁剪的图片库不允许 div 覆盖在图片上显示文本

问题描述

在我的 HTML 和 CSS 图片库中，我希望在图片上显示文本。但是，我只能设法获取图像下方的文本。

这是html代码：

<div class="fleft imgdiv">
    <div>Image Name</div>
    <img class="galleryimg op80" src='http://qnimate.com/wp-content/uploads/2014/03/images2.jpg'>
</div>
<!-- repeats many many times -->

在这里，我只使用了非常少的 CSS，我唯一尝试做的就是让文本Image Name显示在图像上方而不是图像下方。

这是我正在使用的 CSS：

.fleft{
  float:left;
}
.imgdiv {
  width:24%;
  height:150px;
  position:relative;
  overflow:hidden;
  margin:0.5%;
}
.imgdiv .galleryimg {
  min-width:100%;
  min-height:100%;
  height:auto;
  position:relative;
  top:50%;
  left:50%;
  transform:translateY(-50%) translateX(-50%);
}
.op80{
  opacity:0.5;
}

这是一个 jsFiddle，可以更好地理解问题所在。使op80图像略微透明，使我们能够看到下面的文本

JS 小提琴示例

我在这里做错了什么以及如何使文本出现在图像前面而不是图像下方？

标签： htmlcss

解决方案

为图像和文本元素添加 Z-Index 属性。您需要为您的文本 div 创建一个类。我称之为飞行文本，例如。

    .fleft{
      float:left;
    }
    .imgdiv {
      width:100%;
      height:auto;
      position:relative;
      overflow:hidden;
      margin:0.5%;
    }
    .imgdiv .galleryimg {
      min-width:100%;
      min-height:100%;
      height:auto;
      position:relative;
      top:50%;
      left:50%;
      transform:translateY(-50%) translateX(-50%);
      z-index:0;
    }
    .op80{
      opacity:1;
    }

    .flying-text {
      color: red; 
      z-index:1;
      position: relative;
      text-align: center;
      font-size: 2rem;
    }
<div class="fleft imgdiv"> <div class="flying-text">Sleepy Cat</div> <img class="galleryimg op80" src='https://www.humanesociety.org/sites/default/files/styles/1240x698/public/2018/06/cat-217679.jpg'></div>

来源

推荐阅读