Question

我试图将其发布在wordpess的堆栈交换中，我打算在这里尝试。我试图在我的精选IMG上方显示一个框，并在其上方添加一个类别。

我尝试更改<div>'s的顺序，也尝试使用不同的z-index's。

底部的ffff用于测试，因此我知道<div>的剂量工作。只是不会显示height: 50px;width: 100%;background-color: rbga(0, 0, 0, 0.5);的{{1}}。

HTML

.cat-bar

CSS

<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>

content.php中的代码

.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;
}

谢谢您的时间。

Answer 1

只需在您的 .cat-bar 类

中替换以下行

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

尝试在精选的IMG Wordpress上方显示一个框

1 个答案: