如何將背景色僅應用於選擇文本的一半？

Question

當我選擇文字時，背景顏色變爲黃色。

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

不過，我希望它出現這樣的。

是否有可能或不？

Answer 1

謝謝你毀了，至少我一天的一個小時，但我居然發現一個純CSS的解決方案。雖然它並不真實，它涉及很多僞造，但嘿：沒有JavaScript！

我們基本上使用一個data-content屬性，其內容與跨度保持相同，然後將其複製到顯示它的分層: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>

此基礎上，用戶@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) */ 
}