侧面带有动态水平线的标题[关闭]

Question

你好，

这是关于我在上面发布的图片。我觉得这应该很容易，但我就是想不通。我基本上有一个 DIV，它是具有较暗 透视 BG 的容器，在其中我有一些居中的文本。在文本的左侧和右侧，我有这些等宽的水平线。

现在的诀窍是那些水平线，根据我在中间有多少文本来改变它们的宽度，所以在文本的两侧总是有相同的“填充”。需要注意的是，背景不是纯色，而是一张图片，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%;}