html - 将背景应用于跨度 - 但不是文本所在的位置

Question

我正在尝试在我的页面上创建一个标题样式，在标题文本之后，对于列的其余部分，应用了装饰。

我已经创建了样式，并且它正在应用于我的页眉。

header3 {
    font-family:'Orbitron', san-serif;
    color:#7c7e82;
    background: repeating-linear-gradient(
        45deg,
        #d63c09,
        #d63c09 5px,
        #fff 5px,
        #fff 10px
    );
}

样式已应用，但它也在文本的后面/上方。我希望文本后面有一个白色背景，或者背景不应用于它。这是我目前所拥有的:

我要的是下面的样式:

Answer 1

您还可以执行以下操作，它不会更改大部分代码，但会向 header h1 标记添加一个新类。

基本上，将新类(在本例中为 header)设置为选择的新背景色，然后调整 css 中的 width 属性。

.header3 {
    font-family:'Orbitron', sans-serif;
    color:#7c7e82;
    background: repeating-linear-gradient(
        45deg,
        #d63c09,
        #d63c09 5px,
        #fff 5px,
        #fff 10px
    );
}

.header {
  background-color: #fff;
  width: 20%;
}

<div class="header3">
  <h1 class="header">Test Header</h1>
</div>

第二个版本，例如，如果您希望标题被背景装饰所吞没，请使用 CSS 中的 display: inline 属性。

.outer {
  background: repeating-linear-gradient( 45deg, #d63c09, #d63c09 5px, #fff 5px, #fff 10px);
  padding: 1rem;
}

.inner {
  display: inline;
  background: #fff;
  font-size: 2em;
  color: #7c7e82;
  padding: 0.5rem;
  font-family: 'Orbitron', sans-serif
}

<div class='outer'>
  <div class='inner'>Test Header</div>
</div>