侧面带有动态水平线的标题

Question

你好，

这与我上面发布的图片有关。我觉得它应该很容易，但我无法弄明白。我基本上有一个DIV，它是具有较暗透视 BG的容器，在其中我有一些文本以中心为主。在文本的左侧和右侧，我有这些宽度相等的水平线。

现在的诀窍是那些水平线，根据我在中间的文字数量改变它们的宽度，所以总是相同的＆＃34;填充＆＃34;在文本的两侧。重要的是要注意背景不是平面颜色，但是图像和具有较暗BG的容器是透明的。如果它是一个平面颜色，我可以在与BG相同颜色的文本中添加一个厚阴影，只需要将该行作为该DIV的背景，在这种情况下，文本的阴影会使它看起来像因为它在文本后面被打断了。容器也有动态宽度，例如80％。

任何人都知道如何才能完成这项工作？非常感谢你提前！

Answer 1

您可以使用伪元素和rgba（）颜色，这是常用的方法： DEMO

HTML测试

<header>
  <h1> MY CENTERED TEXT</h1>
</header>

CSS测试

header {
  padding:3em;
  background:url(http://lorempixel.com/600/50/nightlife) ;
  background-size: cover;
}
h1 {
  background:rgba(0,0,0,0.5);
  color:white;
  padding:1em 0;
  text-align:center;
  overflow:hidden;
}
h1:before, h1:after {
  content:'';
  width:100%;
  border-bottom:lightgray solid;
  display:inline-block;
  vertical-align:middle;
}
h1:before {
  margin-left:-100%;}
h1:after {
  margin-right:-100%;}