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

Question

我在网页上使用了opacity: 0.1;，使文字几乎看不见。

我希望在选中时能够变得可见。

然而，选中的颜色也几乎看不见。不幸的是，::selection不能改变透明度。

- Stanpol

---

快来看看这个链接。http://css-tricks.com/css-transparency-settings-for-all-broswers/ - Zack

@Utkanos 刚刚尝试了一下背景颜色、透明度和 ::selection。 - Stanpol

Answer 1

你无法在::selection中使用opacity属性。它从未是允许的属性之一，即使它被实现了，也没有意义，因为你并没有修改元素本身的透明度。

相反，你可以在文本和背景中使用rgba()颜色，而不是在整个元素上使用opacity。这不是理想的解决方法，但至少对于颜色来说是可行的。

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

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

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

<p>Almost invisible text that turns opaque on selection.

- BoltClock

---

哇，谁会想到使用特定选择器的允许属性！太棒了。这个答案真是节省了我们在 W3C 文档中浪费的时间。 - Robin Maben

@Robin Maben：是的，在处理::selection时，他们进行了一些实验。请参阅CSS3规范的旧版本：http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#UIfragments。然而，后来这个功能被删除了，所以它不再是标准的一部分。但是现在你提到了这一点，如果其他已有的伪元素（如`::first-line`或`::first-letter`）只适用于一组有限的属性，我也不会感到惊讶，但对此我不太确定。 - BoltClock

@Robin Maben：这可能与伪元素的性质有关。当然，对于任何其他选择器来说，只允许一组属性是没有意义的，因为它们只是选择元素。伪元素不同，它们会创建新的虚拟元素用于样式设置。 - BoltClock

是的，它谈论的是在用户交互时动态（和虚拟）创建的元素。我很高兴学到了新知识。 :) - Robin Maben

Answer 2

不要使用不透明度，只需在rgba颜色中设置alpha值，如下所示...

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

- David Sumich

---

为什么要添加一个与已被接受的答案没有任何关联的回答，而这个答案是在4年前发布的？ - YakovL