Question

我的Drupal视野中有一个物体网格，每个物体都有不同的标题。我正在使用CSS注入器进行更改。每个标题都有一个透明的背景，只能延伸到文本的长度。 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>

Answer 2

我无法看到您的HTML，但我知道在内联元素上设置width并不起作用。再次，它取决于你的HTML，但我敢打赌这将工作：

.tooltitle {
  background-color: rgba(17,17,17,.75);
  color: white;
  white-space: nowrap;
  font-size: 12px;
  position: absolute;
  bottom: 0px;
  left: 6px;
  right: 6px;
  text-decoration: none;
  padding: .5em .7em;
}

使用绝对定位，您可以指定位于父元素底部的位置。

Answer 3

我使用绝对定位。这样就省去了定义像素值的需要（虽然我在这里定义了一些，因为我没有任何内容）。即使div的大小取决于其中的图像，这也会有效。

＆＃13;

.container{
  display: inline-block;
  position: relative;
  width: 200px;
  height: 200px;
  background: lightblue;
  border: 1px solid #333;
}

.title{
  font-family: sans-serif;
  padding: 4px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(30, 30, 30, .8);
  color: white;
}

＆＃13;

<div class="container">
  <img>
  <div class="title">Title of container</div>
</div>

＆＃13;

CSS标准化文本背景

3 个答案: