Question

这可能是非常基本的，但是我有以下标头标记

<h2>This is a Title</h2>

现在我要做的就是更改“ This”的文本和背景的颜色，并单独保留“ is title”，并在与“ This”相同的行上保留标题。

Answer 1

Pseudo-elements允许您选择第一个字母或第一行，但不能选择第一个单词。

要定位 This ，您需要在其周围添加一个真实元素（例如<span>）。

Answer 2

如果可以调整HTML： <h2><span class="bg">This</span> is a Title</h2>

然后.bg {background-color:blue;}

Answer 3

如果您知道字母必须使用不同颜色的长度，也可以查看background-clip或mix-blend-mode，请在回答前查看此信息，因为我不相信完全符合您的需求。

DEMO或以下代码段。

演示包含@supports来过滤浏览器不支持的规则

@supports ( background-clip: text) or ( -webkit-background-clip: text) {
  h2[id] {
    background: linear-gradient(to right, green 2em, black 2em, black 7.75em, purple 7.75em);
    color: white
  }
  h2[id="bgimg"] {
    display:table;/* so it shrinks on the text , only for the demo*/
    background:url(http://lorempixel.com/90/100)    no-repeat left, url(http://lorempixel.com/170/100)  tomato no-repeat right
  }
  h2[id] {
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

@supports (mix-blend-mode:screen) {
  h2[class] {
    position: relative;
    background: white;
    color: black;
  }
  
  h2[class]::before {
    background: linear-gradient(to right, green 2em, black 2em, black 7.75em, purple 7.75em);
    mix-blend-mode: screen;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
}
  h2[id][class] {
    color:white;
    background: linear-gradient(to right, green 2em, black 2em, black 7.75em, purple 7.75em);
    /*reset where it works*/
    background-clip:none;
    mix-blend-mode:normal;
  }

<h2 id>This is a Title and background-clip</h2>
<h2 id="bgimg">This is a Title and background-clip</h2>
<h2 class>This is a Title and mix-blend-mode</h2>
<h2 class id>to show the gradient used</h2>
<hr>
<p> and if it does not work ? use @supports to filter the rules .</p>
<h2> Go to default styling when css rules are not supported </h2>
<h2> regular h2 without style to avoid funny result, sends you back to question :)</h2>

如果浏览器理解以下规则，将会是什么样： render with Fire

screenshot for Chrome

这是另一个有关黑白的演示https://codepen.io/gcyrillus/details/grOEGp

Answer 4

有一个简单的方法：

<h2><span style="background:#000;color:#fff">This</span> is a Title</h2>

还有一种更好的方法：

<head>
  <style>
     h2 span{background:#000;color:#fff}
  </style>
</head>   

<h2><span>This</span> is a Title</h2>

别忘了了解有关在w3scools使用<style>标签的更多信息

如何更改标头部分的CSS

4 个答案: