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

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

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

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

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

Ответы

Ответ 1

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

В основном мы используем атрибут data-content с тем же содержимым, что и span, а затем копируем его в слоистый элемент :after, который отображает его. Затем мы скроем исходный текст и применим высоту 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>

Ответ 2

Это невозможно с помощью только css (без хаков), в настоящее время вы можете создать только небольшой набор свойств для ::selection, например color, background-color, cursor, outline, text-decoration, и text-shadow.

Другие свойства фона будут проигнорированы, поэтому использование градиента невозможно.

Если вам действительно нужен цвет, как описано, вы можете использовать javascript для получения выделенного текста, оберните его с помощью <span> и стиля, который с помощью CSS.

Для небольших предложений или заголовков посмотрите Ответ только на Roberrrts CSS.

Источник:
https://developer.mozilla.org/en-US/docs/Web/CSS/::selection
https://drafts.csswg.org/css-pseudo-4/#highlight-styling

Ответ 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) */
}