html - 如何在选择时仅将背景颜色应用于一半的文本？

Question

当我选择文本时，背景颜色变为黄色。

body p::selection {
  background: #fcf113;
  color: #000;
  display: none;
}
body p::-moz-selection {
  background: #fcf113;
}

但是，我希望它看起来像这样。

可以吗？

Answer 1

谢谢你毁了我一天的至少一个小时，但我实际上找到了一个纯 CSS 的解决方案。虽然它不是很可靠，而且涉及很多伪造，但是嘿:没有 JavaScript!

我们基本上使用一个 data-content 属性，其内容与 span 包含的内容相同，然后将其复制到显示它的分层 :after 元素。然后我们隐藏原始文本并为 after 元素应用 50% 的高度，这样背景颜色只能应用到下半部分。

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: #FFF;
}

h1::selection {
    background: #fcf113;
}

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

基于以上，用户@chrona 制作了这个非常可爱的工作版本:

var paragraph = $('p');
var words     = paragraph.text().split(" ");

paragraph.empty();

$.each(words, function(i, v) {
    paragraph.append('<span data-word="' + v + '"> ' + v + ' </span>');
});

p {
  background: white;
}

body {
  background: white;
}

span {
  position: relative;
  font-size: 1.25rem;
  line-height: 1.4;
}

span::after {
  background: white;
  content: attr(data-word);
  display: block;
  height: 75%;
  left: 0;
  padding-top: 0.14em;
  position: absolute;
  pointer-events: none;
  overflow: hidden;
  top: -0.28em;
  width: 100%;
}

span::selection {
  background: #fcf113;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>