CSS - 动态填充到容器的边缘

Question

快速提问。我正在使用数据库并插入一个图像名称＆＃39;在图像的顶部，如下所示：

目前，图像名称的填充是一个数字，但我希望填充直到图像的边界。我尝试过填充：正确的250;＆＃39;，但显然不会起作用，因为正确的填充从图像名称的末尾开始，可能有不同的长度。

这让我开始认为它需要是动态的，而且我当然是新手。我在网上看过各种各样的东西，但似乎找不到类似的东西，这可能意味着我在寻找错误的东西。无论如何，任何帮助都会很棒。

干杯，

杰克

**当前的CSS（显然还有很多，但这是需要的） - **

h3.imageName {
  position: absolute; top: 278px; left: 10; 
  width: 100%;
  z-index: 20;
}

h3.imageName span {
  color: white; 
  font: bold 18px Helvetica, Sans-Serif; 
  background: rgba(0, 0, 0, 0.7); 
  padding: 8;
}

**当前HTML - **

<h3 class="imageName"><span><?php echo $row['name']; ?></span></h3>

Answer 1

如果图像容器宽度没有改变，您可以给整个文本区域一个宽度。另请考虑在此实例中使用bottom: 0;而不是top:#。

Answer 2

目前还不完全清楚这是如何构建的，但绝对定位的元素是根据最接近的非静态定位祖先的边缘定位的。

不幸的是，包含边框和填充。

一种选择是将图像包装在另一个元素中并将边框应用于：

* {
  box-sizing: border-box;
  margin: 0;
}
body {
  text-align: center;
}
.wrap {
  margin: 1em;
  display: inline-block;
}
.inner {
  position: relative;
  border: 10px solid pink;
}
img {
  display: block;
}
.imageName {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2;
  text-align: left;
  padding: 8px;
}
h3.imageName span {
  color: white;
  font: bold 18px Helvetica, Sans-Serif;
}

<div class="wrap">
  <div class="inner">
    <img src="http://lorempixel.com/400/200/sports/" alt="" />
    <h3 class="imageName"><span>Image Title</span></h3>
  </div>
</div>

作为边框的替代方案......盒子阴影可能是一个选项，因为这不会影响元素的大小。

* {
  box-sizing: border-box;
  margin: 0;
}
body {
  text-align: center;
}
.wrap {
  margin: 1em;
  display: inline-block;
  position: relative;
}
img {
  display: block;
  box-shadow: 0 0 0 10px pink;
}
.imageName {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2;
  text-align: left;
  padding: 8px;
}
h3.imageName span {
  color: white;
  font: bold 18px Helvetica, Sans-Serif;
}

<div class="wrap">

  <img src="http://lorempixel.com/400/200/sports/" alt="" />
  <h3 class="imageName"><span>Image Title</span></h3>

</div>

Answer 3

您使用的是display:inline;元素的跨度，这意味着它的宽度不是自动或100％。您已为跨度添加了背景颜色，这意味着背景不会拉伸到父元素的边缘。将您的背景放在父h3元素上。您已经使用了width:100%;，如果您想在左下角使用它，请尝试使用此功能：

h3{position:absolute;left:0;right:0;bottom:0;background:#000000;background:rgba(0,0,0,0.7);}

此外，我看到你正在添加填充和10px的位置。所以你可以使用像这样的保证金

margin:0px 10px;

这将使h3元素始终与父元素的任何一侧保持一致。

保持距离底部10px。添加bottom:10px;甚至margin-bottom:10px;以保持一致。

另外，我们并不需要跨度本身的任何样式，因为它是h3的子元素。所以只需将你的风格从h3的所有内容中放到一起

h3{position:absolute;left:0;right:0;bottom:0px;margin:10px;marign-top:0px;background:#000000;background:rgba(0,0,0,0.7);color:#FFFFFF;font-family:Helvetica,Sans-Serif;padding:8px;}

另外！别忘了添加相对于h3父元素的位置！

`position:relative;`