CSS 标准化文本背景答案

【问题标题】：CSS Standardizing Background of TextCSS 标准化文本背景
【发布时间】：2017-08-11 19:00:19
【问题描述】：

我的 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;
}

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

【问题讨论】：

我们有机会获得更多代码吗？设置这样的内容还取决于标题的父级等，因此一个精简的示例会很好，并且会引导您更快地找到答案。

标签： jquery html css drupal-7

【解决方案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>

【讨论】：

【解决方案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;
}

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

【讨论】：

是的！非常感谢你。 “在行内元素上设置宽度不起作用”救了我。我以前从未使用过 CSS，所以我不知道很多“规则”。
太好了，很高兴它成功了！ css 的三个方面似乎总是我的麻烦之源：display 属性、position 属性和float/clear 属性。如果您迷路了，摆弄那些（或阅读他们的文档）通常是答案。

【解决方案3】：

我会使用绝对定位。这使您无需定义像素值（尽管我在这里定义了一些，因为我没有任何内容）。即使div 的大小取决于其中的图像，这也会起作用。

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

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

【讨论】：