CSS中带有currentColor的文本阴影不透明度答案

【问题标题】：text-shadow opacity with currentColor in CSSCSS中带有currentColor的文本阴影不透明度
【发布时间】：2021-02-20 12:44:21
【问题描述】：

我正在寻找一种方法让文本发光效果具有阴影不透明度：

body {
  margin: 0 ;
  padding: 0 ;
  background-color: #222 ;
  height: 100vh ;
  display: flex ;
  justify-content: center ;
  align-items: center ;
}

pre {
  font-size: 24px ;
  font-weight: 700 ;
  text-shadow: 0 0 8px currentColor ;
}

&lt;pre&gt;&lt;font color="#1EFF6E"&gt;H&lt;/font&gt;&lt;font color="#1EF379"&gt;e&lt;/font&gt;&lt;font color="#1EE785"&gt;l&lt;/font&gt;&lt;font color="#1EDC90"&gt;l&lt;/font&gt;&lt;font color="#1ED09C"&gt;o&lt;/font&gt;&lt;font color="#1EC5A7"&gt; &lt;/font&gt;&lt;font color="#1EB9B3"&gt;W&lt;/font&gt;&lt;font color="#1EADBF"&gt;o&lt;/font&gt;&lt;font color="#1EA2CA"&gt;r&lt;/font&gt;&lt;font color="#1E96D6"&gt;l&lt;/font&gt;&lt;font color="#1E8BE1"&gt;d&lt;/font&gt;&lt;/pre&gt;

如何将阴影的不透明度降低到 0.75？

【问题讨论】：

这能回答你的问题吗？ Text shadow opacity
这里有几个重复的问题：1) stackoverflow.com/questions/11549757/text-shadow-opacity 2) stackoverflow.com/questions/44412621/css-text-shadow-opacity 3) stackoverflow.com/questions/31849277/text-shadow-with-opacity
实际上它将阴影的颜色设置为一种颜色。按照要求，它不适用于 CSS 的 currentColor。
您的用例中的一个重要问题是“currentColor 是如何确定的？为什么颜色样式是内联添加的？”十六进制内联 currentColor 将使通常的 rgba 解决方案难以为您工作。
@S,Goswami 请查看上面的三个链接。它们并不都需要 rgba。尤其看这个：stackoverflow.com/questions/31849277/text-shadow-with-opacity

标签： css

【解决方案1】：

对于这种情况，我必须坚持使用 JS 解决方案，在这种情况下提取属性颜色。我想要 0.75 或 75% 的不透明度，255 的 75% 是 191.25，以 16 为底四舍五入为 bf。

for(let _i of Array.from(document.getElementsByTagName('font'))) {
  _i.style.textShadow = `0 0 4px ${_i.getAttribute('color')}bf`
}

body {
  margin: 0 ;
  padding: 0 ;
  background-color: #222 ;
  height: 100vh ;
  display: flex ;
  justify-content: center ;
  align-items: center ;
}

pre {
  font-size: 24px ;
  font-weight: 700 ;
}

&lt;pre&gt;&lt;font color="#1EFF6E"&gt;H&lt;/font&gt;&lt;font color="#1EF379"&gt;e&lt;/font&gt;&lt;font color="#1EE785"&gt;l&lt;/font&gt;&lt;font color="#1EDC90"&gt;l&lt;/font&gt;&lt;font color="#1ED09C"&gt;o&lt;/font&gt;&lt;font color="#1EC5A7"&gt; &lt;/font&gt;&lt;font color="#1EB9B3"&gt;W&lt;/font&gt;&lt;font color="#1EADBF"&gt;o&lt;/font&gt;&lt;font color="#1EA2CA"&gt;r&lt;/font&gt;&lt;font color="#1E96D6"&gt;l&lt;/font&gt;&lt;font color="#1E8BE1"&gt;d&lt;/font&gt;&lt;/pre&gt;

【讨论】：

您可以将此链接添加到您的答案中：css-tricks.com/8-digit-hex-codes 其他人。您还可以选择您的答案以将其标记为解决方案；）

【解决方案2】：

您可以为此使用rgba：

rgba(0,0,0, 0.75)

或者你需要的任何颜色。

【讨论】：