Jak zastosować kolor tła tylko do połowy tekstu przy wybieraniu?

Question

Po wybraniu tekstu kolor tła zmienia się na żółty.

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

Ale chcę go do stawienia się w ten sposób.

Czy to możliwe, czy nie?

Answer 1

Dziękuję za zrujnowanie co najmniej godzinę mojego dnia, ale faktycznie znaleziono rozwiązanie tylko CSS. Nie jest to jednak solidne i wymaga dużo udawania, ale hej: bez JavaScriptu!

Zasadniczo używamy atrybutu data-content z taką samą zawartością, co blokady zakresu, a następnie kopiujemy go do warstwowego elementu, który go wyświetla. Następnie ukrywamy oryginalny tekst i stosujemy wysokość 50% do elementu końcowego, w ten sposób kolor tła może być zastosowany tylko w dolnej połowie.

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>

W oparciu o powyższe, @chrona użytkownika made to naprawdę piękny wersję roboczą:

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

Nie jest to możliwe z samym css (bez hacków), obecnie można projektować tylko mały zestaw właściwości dla ::selection jak color, background-color, cursor, outline, text-decoration i text-shadow.

Pozostałe właściwości tła zostaną zignorowane, więc użycie gradientu nie jest możliwe.

---

Jeśli naprawdę potrzebujesz kolor opisaną można użyć javascript, aby uzyskać zaznaczonego tekstu, owinąć go z <span> i stylu tej z CSS.

W przypadku małych zdań lub nagłówków sprawdź: Roberrrts CSS only answer.

Źródło:
https://developer.mozilla.org/en-US/docs/Web/CSS/::selection
https://drafts.csswg.org/css-pseudo-4/#highlight-styling

Answer 3

myślę, że można to zrobić z mocą gradientu:

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