Question

我试图显示项目列表（自定义帖子类型）。只是标题，标签，精选图片和永久链接：

      <li>
        <div class="blog_item">
          <a class="full_link" href="<?php the_permalink(); ?>"></a>
          <div class="abs_bg"><?php the_post_thumbnail(); ?></div>
          <div class="blog_item_inner">
            <h3 class="post-title"><?php the_title(); ?></h3>
            <h5><?php the_tags(' '); ?></h5>
          </div>
        </div>
      </li>

非常简单的想法，当您将鼠标悬停在图片上时，会显示文字，您可以点击其中的任意位置并查看帖子。

通常这可以通过使用一个锚标记与其中的其他元素来完成，但由于某种原因，该方法似乎只创建了2个永久链接并且整个事情都会混乱。

另一个问题是我试图让图像响应。我使用百分比宽度和高度，但除非我将父 .blog_item 元素设为固定高度，否则我无法显示整个图像。

我在这里创建了一个测试 - https://jsfiddle.net/w54htg7g/

这里是CSS：

    .blog_item {
      position: relative;
      transition: all 0.5s;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .blog_item .abs_bg {
      display: block;
      z-index: 2;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      transition: all 0.5s;
    }
    .blog_item .blog_item_inner {
      z-index: 1;
      position: relative;
      padding-top: .5em;
      padding-bottom: .7em;
    }
    .blog_item .full_link {
      z-index: 3;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
    .blog_item:hover {
      background: #000;
    }
    .blog_item:hover .abs_bg {
      opacity: 0.5;
    }

现在看来是这样的：

这就是我想要它的样子：

Answer 1

将position的{{1}}属性更改为.blog_item .blog_item_inner {}而不是position: absolute;

这将绝对将该内容定位在position:relative;元素中，因为.blog_item是父元素并且相对定位。

您可能需要进一步优化.blog_item {}的CSS。但是，这应该是朝着正确方向迈出的一步。

如果没有像jsFiddle链接那样的测试示例，并且只有代码片段存在，那么准确而精确有点困难。

在Wordpress中的特色图像上添加文本覆盖

1 个答案: