不透明的文本阴影答案

【问题标题】：text-shadow with opacity不透明的文本阴影
【发布时间】：2025-12-16 17:45:01
【问题描述】：

我可以使用如下文本阴影不透明度：

text-shadow: 5px 5px 5px rgba(85,0,0,.5);/* 50% opacity */

但我无法控制选择颜色值。所以我只想这样做：

text-shadow: 5px 5px 5px;

这是因为 text-color 可能会有所不同，我想将 text-shadow 的颜色应用为与 text-color 相同的颜色。

那么，有没有什么技术可以在不选择颜色的情况下为颜色值应用不透明度？

【问题讨论】：

您可以将 css 不透明度应用于整个文本，尽管如果您想更改文本阴影的不透明度 - 除了将 rgb 与 alpha 通道一起使用之外，我没有其他方法
看到这个 CSS 规则的“原型”text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;，你可能想像下面这样写来去掉颜色：text-shadow: 5px 5px 5px initial;。
和文本阴影颜色不透明度？
基本上......你不能用 CSS 做到这一点。您将需要 javascript 或创建 tetx-shadow 的替代方法。

标签： css

【解决方案1】：

这是一种使用pseudo element 获得所需外观的方法。

给元素一个data-*属性：

<h2 data-text="this is how it works">this is how it works</h2>

现在可以在:before 中使用content: attr(data-text) 显示文本。它将继承其父元素的颜色，并且可以使用opacity 属性：
```
h2:before {
    content: attr(data-text);
    position: absolute;
    left: 3px;
    top: 3px;
    opacity: 0.1;
}
```

结果：

示例

我还提供了一个粗略的示例，说明如何使用 javascript / jQuery 自动应用它。

var string = $('h1').text();
$('h1').attr('data-text', string);

* {
  margin: 0;
  padding: 0;
}
h1 {
  color: #F00;
  font-size: 5em;
  position: relative;
  font-weight: normal;
}
h2 {
  color: #F09;
  font-size: 3em;
  position: relative;
  font-weight: normal;
}
h1:before,
h2:before {
  content: attr(data-text);
  position: absolute;
  left: 3px;
  top: 3px;
  opacity: 0.1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Give me shadow</h1>

<h2 data-text="this is how it works">this is how it works</h2>

【讨论】：

这个不错。但不使用数据文本就可以了。但我希望没有办法超越这一点。所以，接受这个。谢谢。

【解决方案2】：

你想关注这个吗？

使用RGB颜色到文字阴影rgba(red_value,green_value,blue_value, opacity)

更新

p {
  color: green;
  font-size: 20px;
  text-shadow: 0 10px 1px rgba(255, 0, 0, .3)
}

&lt;p&gt;Example text&lt;/p&gt;

【讨论】：

这将是文本颜色的不透明度而不是文本阴影颜色

【解决方案3】：

如果我理解您的问题，text-shadow 中的 color 是可选的，它采用文本颜色作为默认颜色，因此您可以使用

text-shadow: 5px 5px 5px;
color: rgb(85,0,0); // or whatever you need
opacity: 0.5; // or whatever you need

见text-shadow、opacity

【讨论】：

使用过滤器：Alpha(opacity=50);对于 IE8 及之前的版本 ;-)
这将是文本颜色的不透明度而不是文本阴影颜色