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

Question

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

我创建了样式，并将其应用于我的标题。

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

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

我想要的是以下风格：

标签： htmlcss

Answer 1

您也可以执行以下操作，它不会更改您的大部分代码，但会在您的标题h1标签中添加一个新类。

所以基本上，header在这种情况下，将新类设置为选择的新背景颜色，然后调整widthcss 中的属性。

.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>

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

.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>