尝试在特色IMAGE Wordpress上方显示一个框

Question

我试着在wordpess的堆栈交换上发布这个我试试这里。我试图在我的特色IMG上面显示一个框，上面有一个类别。

我试图改变<div>'s的顺序，并尝试了不同的z-index's。

底部的ffff用于测试，所以我知道<div>剂量工作。它只是不会显示height: 50px;width: 100%;background-color: rbga(0, 0, 0, 0.5);为.cat-bar。

HTML

<div class="s-img-ho">
    <img width="800" height="558" src="#" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="#" sizes="(max-width: 800px) 100vw, 800px">
<div class="cat-ho">
    <span class="cat-span">
        <ul class="post-categories">
            <li><a href="#" rel="category tag">GIFS</a></li>
        </ul>
    </span>
</div>
<div class="cat-bar">fffffff</div>
</div>

CSS

.s-img-ho {
     display: block;
     position: relative;
}
 .cat-ho {
     display: block;
     position: absolute;
     left: -130px;
     bottom: 0px;
     z-index: 99999;
}
 .cat-span {
     font-size: 2em ;
     font-family: 'Arial Black', Gadget, sans-serif;
}
 .cat-bar {
     display: block;
     position: absolute;
     left: 50px;
     bottom: 135px;
     z-index: 80000;
     height: 50px;
     width: 100%;
     background-color: rbga(0, 0, 0, 0.5);
}
 .cat-span a:link {
     text-decoration: none;
     text-shadow: 0.125em 0.125em black;
}
 .cat-span a {
     color: #d6d6d6;
}
 .cat-span a:visited {
     color: #d6d6d6;
}

来自content.php的代码

<div class="entry-content">
    <?php
    if (is_singular()) :
        the_post_thumbnail();
        the_content(sprintf(wp_kses(/* translators: %s: Name of current post. Only visible to screen readers */
            __('Continue reading<span class="screen-reader-text"> "%s"</span>', 'hideout'), array(
                'span' => array(
                    'class' => array(),
                ),
            )), get_the_title()));

        wp_link_pages(array(
            'before' => '<div class="page-links">' . esc_html__('Pages:', 'hideout'),
            'after'  => '</div>',
        ));
    else :
        echo '<div class="s-img-ho">';
        the_post_thumbnail();
        echo '<div class="cat-ho"><span class="cat-span">';
        the_category();
        echo '</span></div>';
        echo '<div class="cat-bar">ffff</div></div>';
        ?>
    <?php endif; ?>
</div><!-- .entry-content -->

感谢您的时间。

Answer 1

只需替换.cat-bar类中的以下行

.cat-bar { background-color: rgba(0,0,0,0.5); }