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

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>

Answer 2

是的，使用渐变效果就很好。

<h1 class="grad">Design the Future Kitchen</h1>

这是CSS代码。

.grad {
    background: rgb(255,255,255);
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,0,1) 50%, rgba(255,255,0,1) 100%);
}

h1 必须是内联元素或使用 span 标签。

h1 { 
  display: inline;
}