如何更改所选文本的不透明度？答案

【问题标题】：How to change the opacity of the selected text?如何更改所选文本的不透明度？
【发布时间】：2016-12-29 03:37:56
【问题描述】：

我在带有opacity: 0.1; 的网页上有几乎看不见的文字我希望它在被选中时变得可见。

但是，选择也几乎不可见。不幸的是，::selection 不会改变不透明度。

【问题讨论】：

【解决方案1】：

您将无法将opacity 属性与::selection 一起使用。它从来都不是允许的属性之一，即使它被实现，它也没有任何意义，因为你并没有修改元素本身的不透明度。

您可以在文本和背景上使用rgba() 颜色，而不是在整个元素上使用opacity。这不是理想的解决方法，但它至少适用于颜色：

body {
    color: rgba(0, 0, 0, 0.1);
}

::selection {
    color: rgba(0, 0, 0, 1);
}

【讨论】：

誓言。谁会想到带有特定选择器的允许的属性！很好的答案。节省人们沉浸在 W3C 文档中的时间。
@Robin Maben：是的，这是他们在处理 ::selection 时尝试的东西。请参阅 CSS3 规范的旧版本：w3.org/TR/2005/WD-css3-selectors-20051215/#UIfragments 不过，它已被删除，因此不再是标准的一部分。但是既然你提到了它，如果只有一组有限的属性也适用于其他现有的伪元素，比如::first-line 或::first-letter，我不会感到惊讶，但我不太确定那个。
@Robin Maben：这也可能与 pseudo-elements 的性质有关。当然，任何其他选择器只有一组允许的属性是没有意义的，因为它们所做的只是选择元素。 Pseudo-elements 的不同之处在于它们创建了新的虚拟元素以用于样式设置。
是的，它讨论了在用户交互时动态创建的动态（和虚拟）元素。我很高兴我学到了一些新东西。 :)

【解决方案2】：

不使用不透明度，只需像这样将 alpha 设置为 rgba 颜色...

::selection {
    background: rgba(255, 255, 0, 0.5)
}

【讨论】：