如何防止text-shadow重叠到上一行的文本

Question

如何避免text-shadow重叠在同一元素内的文字上（例如 h1）？请见下图，这是一个夸张的例子。在我的用例中，我希望文本非常明亮，但实际上阴影覆盖了它并导致混浊的灰色区域。

我在这里创建了一个简化的测试案例以进行演示：http://codepen.io/approach/pen/LgaIe

注意：我故意使用小的line-height来凸显此问题。

- Sam Baldwin

---

我应该补充说明，我故意使用了较小的“行高”来突出显示这个问题！ - Sam Baldwin

看起来像是一个 bug。如果你将它向下设置，它就不会重叠了。 - vals

我所能想到的唯一可能性是复制该元素，将复制的元素设置为透明字体、阴影和较低的z-index。 - vals

Answer 1

您可以考虑在阴影文字上方再添加一层文字：

基本工作示例

<div class="cover">
     <h1><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit eveniet eos deleniti provident ab nam laborum at voluptatem est iste ratione quis error perspiciatis debitis.</a></h1>

</div>

.cover{
 position:absolute; 
 top:0;
}
.cover h1 a{
 color: white;
}

或者为了节省一点时间和打字:

jQuery工作示例

$(function () {
    $('.wrapper').children().clone().css({
        position: 'absolute'
    }).prependTo('body');
});

- apaul

Answer 2

使用伪元素。

http://codepen.io/andrewtibbetts/pen/OXzvOd

首先，将内容重复到元素的一个属性中：

<div class="text-shadow" data-content="This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow.">This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow. This text has a shadow.</div>

接下来是CSS部分：

.text-shadow {
    position: relative;
    text-shadow: 0 -.5em 1em black;
    color: transparent;

    &:after {
        content: attr(data-content);
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        text-shadow: none;
    }
}

- Andrew Tibbetts

---

哇，这太棒了！ - jeremyhoover

Answer 3

据我所知，你无法这样做。尝试使用较小的阴影或增加文本的line-height。

- Rafael Cavalcante

---

谢谢您的回答。请看我在上面原问题下的评论——我忘记提到了 line-height。 - Sam Baldwin

Answer 4

你可以尝试这样做：

h1 { 
   text-shadow: 0 0 2px white, 0 0 10px grey, 0 0 4px black; 
}

你可以拥有无限数量的文本阴影。因此，首先放置一个白色阴影可能有助于清除灰色/黑色。调整像素等参数，使其按照你想要的方式工作。

- CRABOLO

---

谢谢。理论上听起来应该可以工作。我会进行实验并报告结果。 - Sam Baldwin

Answer 5

我认为你需要将line-height增大，比如说line-height: 1.3em;。

- Kariem Muhammed

---

感谢您的回答。请查看我在上面原问题下的评论——我忘记提到了“行高”。 - Sam Baldwin