css - 将绝对文本置于背景较暗的图像上

Question

好的，所以我需要将文本放置在 slider 上方，并在文本后面设置深色背景，以便其可读。简单地使用 text-align: center 在这种情况下不起作用，因为深色背景占据了整个页面宽度

http://codepen.io/SeanPeterson/pen/WoERXb?editors=1100

.wrapper h4{
    position: absolute;
    top: 50%; /* Would love to get rid of this! */
    color: red;
    margin: auto;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    padding: 1rem;
 }
 .wrapper{
    position: relative;
    width: 100%;
    text-align: center;
}

所以我能想到的唯一解决方案是使用左右 css 属性定位它。所以在这种情况下，我将左侧和右侧各设置为 40%。

http://codepen.io/SeanPeterson/pen/WoERXb?editors=1100

.wrapper h4{
    position: absolute;
    top: 50%;
    color: red;
    margin: auto;
    left: 40%;
    right: 40%;
    background: rgba(0, 0, 0, 0.5);
    padding: 1rem;
}

但问题是这必须是一个动态页面并且适用于所有不同的屏幕尺寸。使用这种方法，我将不得不为我能想到的所有屏幕尺寸的值编写代码……这对我来说似乎不是一个 Eloquent 解决方案。另外，如果用户增加页面缩放，我现在也遇到了绝对文本与其他元素重叠的问题。

我还是个菜鸟，所以我希望有更好的方法来做到这一点？

谢谢大家!

Answer 1

在 span 中将文本添加到 h4 中:

<h4><span class=text>SOME TEXT</span></h4>

然后:

.text{
    background: rgba(0, 0, 0, 0.5);
    padding: 1rem;
 }

您可以从 h4 中删除填充，这样 h4 将是:

.wrapper h4{
  position: absolute;
  top: 50%; /* Would love to get rid of this! */
  color: red;
  margin: auto;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
 }

这是您的 pen 的固定版本