具有不透明度的文本阴影

Question

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

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

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

text-shadow: 5px 5px 5px;

这是因为文字颜色可能会有所不同，我想将文字阴影的颜色应用为文字颜色。

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

Answer 1

如果我了解您的问题，color中的text-shadow是可选的，它会将文本的颜色设为默认值，以便您可以使用

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

请参阅text-shadow，opacity

Answer 2

您要关注此内容吗？

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

<强>更新

＆＃13;

＆＃13;

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

＆＃13;

<p>Example text</p>

＆＃13;

＆＃13;

＆＃13;

Answer 3

我发现this question表示我们无法使用text-shadow-color，因此无法使用不透明度来处理文字阴影颜色。

Answer 4

以下是使用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>