使用 css 或 js 高亮半高文本

Question

我需要像黄线那样做。

我知道用<span>或<p>可以模仿标记效果。但是我需要这个标记不要满文字高度，必须是1/2或1/3高度。（如图）

我尝试使用伪 class（之前和之后），但仍然失败。

请多多指教！

Answer 1

应该这样做

h1 {
    position: relative;
    color: #FFF;
}

h1:after {
    content: attr(data-content);
    position: absolute;
    color: #000;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: yellow;
}

h1::selection {
    background: white;
}

<h1 data-content="Hello world!">Hello world!</h1>

来源：

Answer 2

我发现*这个非常有用，我用过一次。

.half-highlight {
  font-size: 30px;
  background-image: linear-gradient(to right, transparent 50%, green 50%);
  background-origin: 0;
  background-size: 200% 50%;
  background-repeat: repeat-x;
  background-position: 0 100%;
  transition: background-position 0.5s;
  background-position: -100% 100%;
}

只需在要突出显示的文本上使用 <span class="half-highlight"> </span>，希望对您有用！！！

*来源：https://codepen.io/JesmoDrazik/pen/ZWBdqq

Answer 3

我能想到的最简单和最快的方法是使用 linear-gradient 来“半填充”你的背景：

.half_background {
  background: linear-gradient(to top, yellow 50%, transparent 50%);
}

<p>Some text, <span class="half_background">some other text with half background</span>.</p>

⋅ ⋅ ⋅

然后，我们可以很容易地扩展它来做一些其他的事情：

p {
  background-color: #eee;
  margin: 0.4em 0;
  padding: 0.6em;
}

.half_background {
  background: linear-gradient(to top, var(--bot) 50%, var(--top) 50%);
}

<p>Some text, <span class="half_background" style="--top: transparent; --bot: yellow;">some other text with half background</span>.</p>
<p>Some text, <span class="half_background" style="--top: orange; --bot: transparent;">some other text with half background</span>.</p>
<p>Some text, <span class="half_background" style="--top: violet; --bot: cyan;">some other text with half background</span>.</p>

Answer 4

你可以做的是在 CSS3 中使用线性渐变来实现这一点，但它对浏览器的支持仍然处于边缘。 https://caniuse.com/#feat=css-gradients

下面是它的外观示例：

HTML:

<div class="container mt-5">
  <div class="row">
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. <span class="highlighted">Sunt maiores, praesentium possimus itaque laudantium modi ratione cumque nisi quis quae hic. Maiores iure a dicta fugiat dolores modi in neque! Lorem ipsum dolor sit, amet consectetur adipisicing elit.</span> Facere ipsum sequi necessitatibus ex consectetur libero cumque velit culpa aut quo magnam eaque adipisci cupiditate eos autem molestiae, quisquam vel iusto.
    </p>
  </div>
</div>

CSS:

.highlighted {
  background: linear-gradient(0deg, yellow 50%, transparent 50%);
}

要查看运行中的代码，这里是 link： https://codepen.io/anon/pen/ejBLeq?editors=1100

使用 css 或 js 高亮半高文本

use css or js highlight text with half height

javascript

css

highlight