Как применить цвет фона только к половине текста при выборе?

Question

Когда я выбираю текст, цвет фона меняется на желтый.

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

Но я хочу, чтобы выглядеть следующим образом.

ли это возможно или нет?

Answer 1

Спасибо за уничтожение по крайней мере час моего дня, но я действительно нашел только для CSS-решения. Это не очень здорово, хотя, и это связано с большим количеством подделок, но эй: Нет JavaScript!

В основном мы используем атрибут data-content с тем же содержимым, что и пробел, а затем скопируем его в слоистый элемент , который отображает его. Затем мы скроем исходный текст и применим высоту 50% к элементу after, таким образом, цвет фона можно применить только к нижней половине.

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

Это не возможно с только 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

Я думаю, что вы можете сделать это с градиентом эффект:

#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) */ 
}