标题前后的线在图像上[重复]

Posted 2023-03-05

【中文标题】标题前后的线在图像上[重复]

【英文标题】：Line before and after title over image [duplicate]

【发布时间】：2014-06-28 08:17:00

【问题描述】：

我想在一个居中的标题之前和之后创建一个行。线条和文字必须具有透明背景才能将它们定位在不均匀的背景上。线条不得为 100% 宽度，如下所示：

标题的文字可以改变：

标题宽度未知 标题可以跨越多行

h1 
  text-align: center;
  border-bottom: 1px solid #000;

<h1>Today</h1>

【问题讨论】：

最大的问题是图片背景。你试过什么？

***.com/questions/5214127/…

@DanMan，是的，如果没有背景，我可以设置文字背景覆盖线条，那么线条和文字将具有固定宽度

@Rein：不，这个问题与这个问题的要求不同。这是一个以特定方式工作的字段集，与此不同。

【参考方案1】：

您可以在标题的两侧制作一条线条，其中包含 2 个伪元素和边框：

这适用于

透明背景

（线条和标题具有透明背景）。 行长将适应标题宽度，因此无论标题长度如何，它们始终在同一位置开始和结束。 标题可以

跨越多行

，而左右行保持垂直居中（请注意，您需要将标题包装在 <span> 标记中才能正常工作。请参阅演示)

@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
 body 
  background-image: url(http://i.imgur.com/EzOh4DX.jpg);
  background-repeat: no-repeat;
  background-size: 100% auto;
  font-family: 'Open Sans', sans-serif;

h1 
  width: 70%;
  margin: .7em auto;
  overflow: hidden;
  text-align: center;
  font-weight:300;
  color: #fff;

h1:before, h1:after 
  content: "";
  display: inline-block;
  width: 50%;
  margin: 0 .5em 0 -55%;
  vertical-align: middle;
  border-bottom: 1px solid;

h1:after 
  margin: 0 -55% 0 .5em;

span 
  display: inline-block;
  vertical-align: middle;

<h1>Today</h1>
<h1>Today news</h1>
<h1><span>Today<br/>news</span></h1>

【讨论】：

文字较多时，行和文字的宽度会变长

@juo 我更新了我的答案以满足您的需求。

可以把h1变成img吗？

@you 不能只将h1 更改为img 标签，因为您不能在img 上添加伪元素。但是您可以在h1 元素中添加img 标签，或者将h1 更改为div 并将img 放入其中。

【参考方案2】：

这是另一种使用 flexbox 显示的方法。 flex-grow 属性指定当元素的总大小小于容器大小时，应如何在元素之间分配可用空间。

默认情况下，在产生行的元素上没有指定width，并且它们没有content（意味着它们基本上是空的并且不占用空间）。但是，这些元素上的flex-grow 设置将使剩余空间（容器的总空间 - 文本的空间）在它们之间平均分配。这使得除了文本所在的位置之外，这条线看起来好像是从一端延伸到另一端。

内容两侧的实线：

在下面的 sn-p 中，从上到下的渐变用于产生在内容的任一侧都有实线的效果。

h3
  display: flex;
  flex: 1;
  width: 70%;
  margin: 20px auto;
  line-height: 1em;

.heading:before, .heading:after,
.heading-ie span.after, .heading-ie span.before
  content: '';
  flex-grow: 1;
  margin: 0px 4px;
  background: linear-gradient(to right, white, white);
  background-size: 100% 2px;
  background-position: 0% 50%;
  background-repeat: repeat-x;


/* Just for demo*/
body
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h3 class='heading'>Something broader</h3>
<h3 class='heading'>Something broader and broader</h3>
<h3 class='heading'>Something broader<br/> and spans multiple <br/> no. of lines</h3>

<!-- IE11 specific version -->

<h3 class='heading-ie'>
  <span class='before'></span> <!-- IE11 supports flex-grow only on actual elements -->
  Something broader and broader and broader
  <span class='after'></span> <!-- IE11 supports flex-grow only on actual elements -->
</h3>

---

内容两侧带有渐变效果的线条：

在下面的 sn-p 中，从左到右的细渐变用于产生一条线的效果，从内容附近的纯色变为另一侧的透明。

h3
  display: flex;
  flex: 1;
  width: 70%;
  margin: 20px auto;
  line-height: 1em;

.heading:before, .heading:after,
.heading-ie span.after, .heading-ie span.before
  content: '';
  flex-grow: 1;
  margin: 0px 4px;
  background-size: 100% 2px;
  background-position: 0% 50%;
  background-repeat: repeat-x;

.heading:before, .heading-ie span.before
  background-image: linear-gradient(to right, transparent, white);

.heading:after, .heading-ie span.after
  background-image: linear-gradient(to left, transparent, white);


/* Just for demo*/
body
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h3 class='heading'>Something broader</h3>
<h3 class='heading'>Something broader and broader</h3>
<h3 class='heading'>Something broader<br/> and spans multiple <br/> no. of lines</h3>

<!-- IE11 specific version -->

<h3 class='heading-ie'>
  <span class='before'></span> <!-- IE11 supports flex-grow only on actual elements -->
  Something broader and broader and broader
  <span class='after'></span> <!-- IE11 supports flex-grow only on actual elements -->
</h3>

^{注意：在 sn-p 中，我在行中使用了额外的 span 元素，因为 IE11 似乎不支持伪元素上的 flex-grow。否则，同样可以使用伪元素来实现。}

---

这种方法的

缺点是浏览器对该功能的支持，目前还很低。您可能还必须采用一些特定于浏览器的自定义，这些自定义在我的答案here 中进行了详细说明，与此类似。

目前，这并没有比 web-tiki 的答案提供任何额外的东西，而只是另一种可能的选择。这种方法在以下情况下会更有帮助：

h3
  display: flex;
  flex: 1;
  width: 70%;
  margin: 20px auto;
  line-height: 1em;

.heading-ie .start, .heading-ie .middle, .heading-ie .end
  content: '';
  flex-grow: 1;
  margin: 0px 4px;
  background: linear-gradient(to right, white, white);
  background-position: 0% 50%;
  background-size: 100% 2px;
  background-repeat: repeat-x;


/* Order specifies the order in which the elements should be presen within container */

.content-1
  order: 2;

.start
  order: 1;

.middle
  order: 3;

.content-2
  order: 4;

.end
  order: 5;


/* Just for demo*/

body 
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<h3 class='heading-ie'>
  <span class='start'></span> <!-- IE11 supports flex-grow only on actual elements -->
  <span class='content-1'>Text here</span>
  <span class='middle'></span> <!-- IE11 supports flex-grow only on actual elements -->
  <span class='content-2'>and here too</span>
  <span class='end'></span> <!-- IE11 supports flex-grow only on actual elements -->
</h3>

<h3 class='heading-ie'>
  <span class='start'></span> <!-- IE11 supports flex-grow only on actual elements -->
  <span class='content-1'>Text with <br/> line break</span>
  <span class='middle'></span> <!-- IE11 supports flex-grow only on actual elements -->
  <span class='content-2'>and here with <br/> line break too</span>
  <span class='end'></span> <!-- IE11 supports flex-grow only on actual elements -->
</h3>