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

Question

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

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

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

有可能吗？

Answer 1

感谢你破坏了我一天中至少一个小时，但实际上我找到了一个仅限CSS的解决方案。它虽然不是很坚固，但它涉及很多假装，但是嘿：没有JavaScript！

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

基于以上所述，用户@chrona使这个版本非常可爱：

＆＃13;

＆＃13;

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

paragraph.empty();

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

单独使用css是不可能的（没有黑客攻击），目前您只能为::selection，color，background-color等cursor设置一小组属性， outline，text-decoration和text-shadow。

其他背景属性将被忽略，因此无法使用渐变。

如果您确实需要描述的颜色，可以使用javascript来获取所选文本，使用<span>包装并使用CSS设置样式。

对于小句或标题，请查看Roberrrts CSS only answer。

来源：
https://developer.mozilla.org/en-US/docs/Web/CSS/::selection
https://drafts.csswg.org/css-pseudo-4/#highlight-styling

Answer 3

是的，可以使用渐变效果。

<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;
}

Answer 4

我认为你可以用渐变效果来做到这一点：

#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(rgba(255,255,0,0) 70%, rgba(255,255,0,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(rgba(255,255,0,0) 70%, rgba(255,255,0,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(rgba(255,255,0,0) 70%, rgba(255,255,0,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(rgba(255,255,0,0) 70%, rgba(255,255,0,1)); /* Standard syntax (must be last) */
}