时间戳

首页 > 解决方案 > CSS中带有currentColor的文本阴影不透明度

css - CSS中带有currentColor的文本阴影不透明度

问题描述

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

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 ;
}
<pre><font color="#1EFF6E">H</font><font color="#1EF379">e</font><font color="#1EE785">l</font><font color="#1EDC90">l</font><font color="#1ED09C">o</font><font color="#1EC5A7"> </font><font color="#1EB9B3">W</font><font color="#1EADBF">o</font><font color="#1EA2CA">r</font><font color="#1E96D6">l</font><font color="#1E8BE1">d</font></pre>

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

标签： css

解决方案

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

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 ;
}
<pre><font color="#1EFF6E">H</font><font color="#1EF379">e</font><font color="#1EE785">l</font><font color="#1EDC90">l</font><font color="#1ED09C">o</font><font color="#1EC5A7"> </font><font color="#1EB9B3">W</font><font color="#1EADBF">o</font><font color="#1EA2CA">r</font><font color="#1E96D6">l</font><font color="#1E8BE1">d</font></pre>

推荐阅读