jquery - CSS标准化文本背景

Question

我的 Drupal View 中有一个对象网格，每个对象都有不同的标题。我正在使用 CSS 注入(inject)器进行更改。每个标题都有一个透明的背景，只延伸到文本的长度。 This is what they are currently displayed我要黑底继续to the right edge of the image在它后面。我试过改变宽度，但背景没有改变。似乎无论我如何尝试更改大小，背景仍然只填充到文本的长度。我注意到尺寸以某种方式设置为自动，但我认为通过手动更改尺寸，它会覆盖它。我还尝试在每个文本的右侧添加填充..

padding-right: calc(276px - 100%);

我认为 100% 的宽度是可变的，从固定的像素数量中减去，它们都是相同的大小。不幸的是，每个标题的填充大小仍然相同。这是我目前拥有的标题 div 代码:

.tooltitle {
    background-color: rgba(17,17,17,.75);
    color: white;
    white-space: nowrap;
    font-size: 12px;
    position: relative;
    top: 160px;
    left: 6px;
    text-decoration: none;
    padding: .5em .7em;
    display: inline;
}

关于如何使这些标题背景大小相同的任何想法？

Answer 1

像这样？

.box {
height: 200px;
width: 200px;
border: 1px solid black;
position: relative;
}

.tooltitle {
    background-color: rgba(17,17,17,.75);
    color: white;
    position: absolute;
    bottom:0;
    padding-top:1rem;
    padding-bottom:1rem;
    width:100%;
}

<div class="box">
  <div class="tooltitle">Featured</div>
</div>